1
votes

Here is my code. The content image was working briefly, but it is gone now.

Attempting to get the Header to appear only at the top of the page, image height is 1000px. Footer at bottom of page, image height is 1000px. content image needs to repeat to fit content. It is a blog so it varies. Image height is 1000px.

body {
   background:#0c1824;
   color:#170d23;
   font:11px/18px arial, verdana, helvetica, sans serif;
   margin:0px 0px 0px 0px;
   padding:0px;
}

header,#footer,#content

#header{ 
    background-image: url(http://i1331.photobucket.com/albums/w595/4V3D15/header_zpsf652d36b.png);
    background-position: center top;
    background-repeat: no-repeat;

}
#footer{
    background-image: url(http://i1331.photobucket.com/albums/w595/4V3D15/middle_zps8a8ab3d1.png);
    background-position: center bottom;
    background-repeat: no-repeat;
}
#content{

    background-image: url(background-img-link);
    background-size: 100#;
    background-position: center center;
    background-repeat: repeat-y;

}
1

1 Answers

1
votes

You need to set a height for each of your sections...
Since you are using background images, they won't show unless there is content to expand the section.

Take a look at this DEMO

For example, I've updated your header CSS like this:

#header{ 
    background-image: url(http://i1331.photobucket.com/albums/w595/4V3D15/header_zpsf652d36b.png);
    background-position: center top;
    background-repeat: no-repeat;
  height:200px;

}

Note the addition of the height:200px here. You'll need to adjust the values for each as needed to match what you are looking for.