CODEWITHSUNDEEP
htmlcssimagebackground
user3537990
user3537990

Reputation:

Text appearing under image

So I'm learning HTML and CSS, and I have an image as a background. But when I try to add text on it, it covers it. Here's my CSS

* {
    padding: 0;
    margin: 0 auto;
}
.img{
    z-index: 2;
    width: 100%;
    height: 100%;
    background-image: url('126.42.jpg');
    position: fixed;
}
body{
    z-index: 99;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

And my HTML:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="img"></div>
    <h1>test</h1>
    <h1>test</h1>
    <h1>test</h1>
</body>
</html>

And here's a fiddle http://jsfiddle.net/ATS7V/

Upvotes: 1

Views: 237

Answers (3)

Coolen
Coolen

Reputation: 180

Just add

background-image: url('http://s29.postimg.org/lltw25n07/126_42.jpg');
background-repeat:no-repeat;
background-attachment:fixed;

To your body

body{
z-index: 99;
width: 100%;
height: 100%;
background-image: url('http://s29.postimg.org/lltw25n07/126_42.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
}

http://jsfiddle.net/jcsl/ATS7V/12/

Upvotes: 1

henrymason
henrymason

Reputation: 109

I'm assuming when you say text is covered, you want it to be displayed.

So do the following:

h1{
 position: relative;
    z-index: 1;
}

<div class="img">
 <h1>test</h1>
<h1>test</h1>
<h1>test</h1>   

</div>

Here's the JSFiddle. http://jsfiddle.net/ATS7V/4/

Upvotes: 2

Andrew
Andrew

Reputation: 20071

Your z-index property is setting the image on top of everything else.

Change it to:

z-index: -1;

http://jsfiddle.net/ATS7V/1/

Upvotes: 0

Related Questions