Getting a background image to fill the screen...

[rhimix]

I have read the details suggested in other threads about stretching background images but am unsure on how to basically implement them in the Actinic Stylesheet. I have tried to follow instructions from HERE and HERE which seems to be the most commonly suggested help pages but as the coding shown doesn't quite look like the coding shown in the Actinic Stylesheet i don't really know what to do with it.

I've tried lots of different variations and currently have the image in the top, left hand portion of the screen and not repeated - what i would like is for the image to fill the screen, the image is too long vertically to tidily fit the basic screen so would need to window have a scrolling facility to scroll down to view the whole image which i also can't get it to do so the bottom half of my image cant be viewed.

I understand people have managed to do what i want to do and was hoping someone could give me tips on where to place the code in the stylesheet or show me some examples?

Thanks,

Rhian

[pinbrook]

To be honest i'd forget about it - why?

1 background images simply get in the way, they make it more difficult to read text on top of them and increase download time, with an ecommerce store you need to make things as easy as possible for the potential customer.

2 with multiple resolutions ie standard screen and widescreen - its alot of faff for no gain

[benji_styler]

Why not use a gradient or pattern image.

ie:

body {
text-align: center;
margin:0;
padding:0;
background-image:url(images/gradiant.jpg);
background-repeat: repeat-x;
background-color: #F2DD9C;
}

The background image as shown here http://gfc.alphaclient.co.uk/ looks effective and is very small. The gif im using is only 4 kilobytes, so no impact on the user.

[jont]

body {
text-align: center;
margin:0;
padding:0;
background-image:url(images/gradiant.jpg);
background-repeat: repeat-x;
background-color: #F2DD9C;
}

or can can use:

body {
margin:0;
padding:0;
background: #F2DD9C url('gradient.jpg') repeat-x;
}

You do not want to really text-align: center in the body otherwise you will probably need to text-align left everything else thereafter.

As a note you should also keep images in the root site folder and not subfolders .. it creates less issues with Actinic.

[sean_jackson]

I've got one in one of my sites - looks like this: www.harpendeninteriors.com

I ended up hardcoding it into the brochure and content page - and curiously selecting : 'store is using a background colour (not an image)' as true in site options as set to false it repeated (wallpapered) my large logo gif. In IE6 it scrolls which is undesireable, I havn't implemented any code for it to be ignored though - which I should. Maybe this helps you some? regarding how I got my bkgrnd image to work.

[completerookie]

full cross browser css version
over at CSS play