This project is read-only.

Stretch Background Image in Standard Theme

Topics: Themes
Apr 8, 2011 at 8:48 PM

Anyone know how to set the background image to grow with the size of the browser?

Here is what i added to the style sheet.  I also included 'z-index:1' to the header, content and other containers so that they will show on top of the image, however the header will disappear all together although at this point i have it showing but the image begins below the header and the content area displays below the image, way down on the page. So it is essentially placing the image in between the header and body area and not stretching to fill the background.

Site.master i added the following link to the image right below the <body> tag. have tried variations of linking to the imagebut get the same result.

<img runat="server" src="~/themes/standard/interim_bkgrd.jpg" alt="background image" id="bg" />

Style Sheet

body {
    font-family: Verdana;
    font-size: 11px;
    margin: 0 auto;
    width: 980px;
    position: relative;
    height: 100%;
    margin: 0 auto;
    padding: 0;


img#bg {
  z-index: 0;

#content {
    float: left;
    width: 70%;


PLEASE help.


Apr 9, 2011 at 1:09 AM

I don't think I've ever seen that done before. Do you have an example so I can take a look?

Apr 11, 2011 at 2:31 PM

Thanks for replying.  here is a link to the article that i am trying and a link to the sample.

Sample of what i want it to look like.

Article to Possible solution


Our Blog

Please let me know if you find any possible solutions.