CODEWITHSUNDEEP
htmlcss
user46688
user46688

Reputation: 763

How to place background image behind page content?

I've got a background image on my webpage. Now I want to add content that floats over it. The code below places the content behind the image. How to correct it?

Note that I've borrowed (and I'm trying to get the effect) discussed in this link for background image: CSS-Only Technique #2 from: http://css-tricks.com/perfect-full-page-background-image/

<!DOCTYPE html>
<html>
<head>  
    <style type="text/css">
    <!--
    #bg {
            position: fixed; 
            top: -50%; 
            left: -50%; 
            width: 200%; 
            height: 200%;
          }
          #bg img {
            position: absolute; 
            top: 0; 
            left: 0; 
            right: 0; 
            bottom: 0; 
            margin: auto; 
            min-width: 50%;
            min-height: 50%;
          }
     -->
     </style>      
</head> 
<body>

    <div id="bg">
        <img src="myimage.jpg">
    </div>

    <div id="mycontent">
        ...
    </div>
 </body>
 </html>

Upvotes: 1

Views: 34188

Answers (3)

jleggio
jleggio

Reputation: 1286

Simply set your z-index to a negative value

#bg{
    z-index:-1;
}

Upvotes: 6

Sajidkhan
Sajidkhan

Reputation: 11

Please refer to this:

Reference 1

Reference 4

Upvotes: 0

Throne Creative
Throne Creative

Reputation: 363

This has been my goto solution for easy BG images. You wont need to add the image the the HTML markup - just reference in the css file. This will also perfectly scale the image for you.

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;
}

Source: http://css-tricks.com/perfect-full-page-background-image

Upvotes: 1

Related Questions