CODEWITHSUNDEEP
htmlcss
user3858124
user3858124

Reputation: 15

Stop background image from going behind header/footer

I have a webpage that has a header and a footer. The background image goes behind both of them cutting about 1/4th the top of the image off behind the header and another 1/4th off behind the footer. Here is my CSS for my background image.

background-image: url('http://codegamer.net/images/majestic/patterns/lol2.jpg');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;

I just want the image to start under the header and end before the footer so I can see the full image.

Upvotes: 0

Views: 3791

Answers (1)

mencina
mencina

Reputation: 68

1- Remove those properties from the body div.

2- Create a new div that contains the <div id="container">, like this:

HTML 

 <div id="container-background">
   <div id="container">...</div>
 </div>

3- Assign the following properties to your new div:

CSS

#container-background {
  background-image: url('http://codegamer.net/images/majestic/patterns/lol2.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

Upvotes: 1

Related Questions