Background image cover entire background w/one image

If you want to have it make your image 100% width and 100% height of the users screen use this code:

body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 65.5%;
color: #000000;
background-color: #e5edf5;
background-image: url(../images/bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
background-clip: border-box;
background-origin: padding-box;
background-size: 100% 100%;
}

This is a handy link regarding viewing websites on iphones where it ends up shrinking the backgrounds to fit on the iphone screen, and how to prevent it.

http://www.defusion.org.uk/archives/2010/02/19/shrinking-large-background-image-bug-in-iphone-safari/

Instead of adding a whole new body{} rule and commenting out the existing one, you can just add the new property declarations to the existing one - neater and cleaner.

Now that IE9 has fairly widespread use, it is possible to use the CSS3 background-size property (all other major browsers already support it). IE8 or older will ignore this, though.

If you want the background to show behind the header and footer content, you will need to make the #mainWrapper background-color transparent, and give a background-color to #contentMainWrapper or whatever elements you want opaque.

Thanks for the input gjh42

I've made the mainwrapper area 80% opacity after studying and looking at a few different settings this seems best to see my whole image....the whole iphone thing is still an iphone thing ...

In Zen 1.3.9h i changed my mainWrapper section to the following

/wrappers - page or section containers/
#mainWrapper {
background-color: #ffffff;
border:1px solid black;
opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */
text-align: left;
width: 750px;
vertical-align: top;
border: 1px solid #9a9a9a;
}

Works great in Chrome and IE, but in Firefox it is right aligning the background image instead of stretching it to 100%....not too worried since most use IE or Safari these days.
I'm working on getting a hover effect so it brightens up when mousing over categories, or the images in my store / mainwrapper...

It's working fine in Firefox for me (Firefox 9).

most use IE or Safari these days.?? Safari is the second most used browser? Where are you?

Lots of iphones, ipads, etc. out there. lots of macs too...soon lots of apple televisions...

If you go by traditional ratings for december 2011 here ya go
IE = 20.2%
FF = 37.7%
Chrome = 34.6%
Safari = 4.2%
Opera = 2.5%
http://www.w3schools.com/browsers/browsers_stats.asp

Counting mobile devices, Safari could have a larger share. Macs are already counted in the stats. And of course, w3schools' stats are skewed toward tech-savvy users who are less likely to use IE (whatever we might like to be the case).

anyways, back to topic, do you know how to get the hover/mouse over to change opacity to 100% for products/categories, etc.? Once i get that, i will have a dream page, especially once i put a better image as my background.

#whateverElement:hover {
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

What do you mean for #whateverElement?

Should i add it here:

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
margin: 0em;
padding: 0em;
}

thanks! Add it to whatever rule affects the elements you desire, or make a new rule with the selectors you need to affect. If you want certain elements 100% opacity all the time, just add that to their rules if they have one. If you want it for hover only, you will probably need a new rule.

anjordan77:

If you want to have it make your image 100% width and 100% height of the users screen use this code:

body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 65.5%;
color: #000000;
background-color: #e5edf5;
background-image: url(../images/bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
background-clip: border-box;
background-origin: padding-box;
background-size: 100% 100%;
}
This worked perfectly for me, Thanks! I just had to change the backgound colour so that it didn't look strange whilst the image loaded. I put it in my includes/templates/MYTEMPLATE/css/stylesheet_tm.css and commented out the old body.
you can see it working at
https://www.curvesandcorsets.com

This works for me on IE, Firefox and safari but for some reason the backgroud image wont appear at all on an iphone. Does anyone know why?

johnybravo:

This works for me on IE, Firefox and safari but for some reason the backgroud image wont appear at all on an iphone. Does anyone know why?

Have you followed the points in this link?

http://www.defusion.org.uk/archives/2010/02/19/shrinking-large-background-image-bug-in-iphone-safari/

I have now. I use gimp for image editing. All I did was open the image file and click save as jpeg let gimp choose the settings and it reduced the size of the image without reducing the quality.
it now works on an iphone!
https://www.curvesandcorsets.com

Glad it worked, I got stuck on that one too.

I'm still getting some weird phenomenon in IE the latest...i think i have a mouse over effect that i need to remove...but oh well...for not knowing any programming i manage to hack along pretty well compliments of these great forums.

Could not get this to work until I found this

html {
	background: url(images/bg.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

Credited to this site
http://css-tricks.com/perfect-full-page-background-image/

drarkan:

Could not get this to work until I found this

html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

> 
> Credited to this site
> [http://css-tricks.com/perfect-full-page-background-image/](http://css-tricks.com/perfect-full-page-background-image/)

Doesnt work in IE 7 or 8 so can't really be used.