Background image *SOLVED*

[DaveSmooth]

I have searched the forums, found answers, tried them, but it still is not working right. This is my first Joomla site and so far so good except I can't get a background image to work the way I want. I would like it centered and fixed is all on certain articles on the site. I've tried all variations of:

background-image: url('../images/myimage.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom center;

And it just won't get centered and stay there. So far by leaving the bottom 2 out, I can get the image centered, but when I apply either of the last 2, it goes crazy. I'm putting this as a div at the top of each article. Is that correct? If it needs to be done via css, then I guess I can learn how to do that too, if pointed in the right direction. I've attempted some of those suggestions but am not sure I'm even editing the right css. Again, this is my first site.

The site is: http://www.whitedogdesignstudio.com I am running 1.6.3 which was the default at godaddy.

And the image is only wanted on certain articles/menu items, and is in place on the ones I want but just isn't fixed. I would love some feedback. Thanks in advance!!!

[Markstein]

Try using background-position: 50% 50%;

[DaveSmooth]

The 50 50 tip helped, however when I apply the fixed attribute, the image goes into the upper left (but is fixed and not scrolling...what I want).

Here are 2 examples:

http://whitedogdesignstudio.com/about Perfect image placement...just where I want it.
And its code:

Code: Select all

<div style="background-image: url(images/whitedog3.jpg); background-repeat: no-repeat; background-position: 50% 50%;">

http://whitedogdesignstudio.com/designer Background fixed, but image shifts to upper left of article.
And its code:

Code: Select all

<div style="background-image: url(images/whitedog3.jpg); background-repeat: no-repeat; background-position: 50% 50%; background-attachment: fixed;">

Again, these are articles that I am editing through the TinyMCE editor. I don't have a grasp on css, but don't think its required for individual articles. Maybe I'm wrong? Again, thanks for the other tip, it helped and now I feel like I'm halfway there, just need to fix the positioning once the fixed attribute is applied. Thanks!

[DaveSmooth]

YAY!!! I figured it out. What it took was adjusting the percentages of the position after I applied the fixed attribute.

The winning code:

Code: Select all

<div style="background-image: url(images/whitedog3.jpg); background-repeat: no-repeat; background-position: 80% 80%; background-attachment: fixed;">

Don't know if that is the way its supposed to be done, but hey, its working for me.

I consider this solved unless there is a better way I should be doing it.

[Markstein]

One thing I would suggest is use shorthand CSS which requires less code. For example your code:

Code: Select all

<div style="background-image: url(images/whitedog3.jpg); background-repeat: no-repeat; background-position: 80% 80%; background-attachment: fixed;">

can be specified in one declaration like this:

Code: Select all

<div style="background: url(images/whitedog3.jpg) no-repeat 80% 80% fixed;">

Glad you're on your way. Have fun!

Mark

[DaveSmooth]

Thanks for the tip Mark! Very much appreciated. I'm definitely digging joomla.