How do I get static b/g with images?

[davidandrews]

HI There
I would love a background like this:

www.dvdworldusa.com

with images left and right

How do I :
1) get the stylsheet code right?
and
2) prepare the image so the sizing is correct!

My current stylesheet for my (different) fixed background isthis:


body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
color: #077090;
background-color: #transparent;
background-image: url(../images/tileback.jpg);
background-repeat: repeat-x;
background-attachment: fixed;}
}



Thanks for any help/suggestions!

[stevesh]

Usually that kind of thing is done with one big image as the body background with the faces on each side, and a transparent area the same width as your mainWrapper in between.

[davidandrews]

think I am part way there:

I viewed source and think this is it:

background: black url(images/graphics/homepagesleeves/promo_background.jpg) fixed top center no-repeat;

How woudl I integrate with my existing code?

Thanks!

[fourbit]

Put this in your css stylesheet for your template.

background:black url(images/graphics/homepagesleeves/promo_background.jpg) no-repeat fixed center top;

That should do it. Give us a url for your site. Would like to see it.

LOL. I should have refreshed before I finished that reply. ;) Looks like you got it.

[davidandrews]

Just as I thought! Many Thanks
Site still in progress (testing) maybe one day, I will finally get there.
have used the thing as a long learning curve...

Thanks loads for the help

Any special rules on the image i use in terms of dimensions etc?

[gjh42]

Nope. Background-images are what size they are, and (if smaller than the container) will repeat automatically to cover the whole container unless you specify repeat-x, repeat-y or no-repeat. They start at the top left corner unless you tell them to position elsewhere.

The smaller the image file, the faster the bg will load; if a repeating image can do what you want, it is better than one big image.

[gjh42]

Note: it is recommended to save template images in your custom template folder instead of the main product images folder. So the property would look like this:

background:black url(../images/promo_background.jpg) no-repeat fixed center top;

and you would save it as

/includes/templates/your_template/images/promo_background.jpg.

[davidandrews]

High Paul and Glenn
THanks LOADS for your help, it is as I figured but thanks for confirming
Hope this thread proves useful to others needing a similar effect