CODEWITHSUNDEEP
htmlcssbackground-image
bc110402307 Syed Zeeshan Haide
bc110402307 Syed Zeeshan Haide

Reputation: 454

Backgroung Image is not displaying on full screen

I am trying to display the full image in background. But! it's showing very strange behaviour.

It's taking only 60% of my screen. The rest of the screen takes white color. But when i am defining opacity attribute, then this opacity applies only on the rest of the 40% screen and image starting to display with opacity effect (but only in this 40% screen). ..

I have googled alot of times and applied alot of css tricks but it does not taking full screen with opacity. ..

Kindly help me!

css:

html, body {
    height:100%;
}

body{ 
    background: url(../..//images/background_pic.jpg) center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    opacity: 0.8;
}

Upvotes: 2

Views: 1448

Answers (2)

Matt Roy
Matt Roy

Reputation: 1525

I found this way to solve your problem. Check this JSFiddle.

Style:

html, body {
}
.parent{
  position:relative;
}
.background{ 
  position:absolute;
  background: url(http://farm6.static.flickr.com/5182/5613127636_e854aea66b_o.png) no-repeat center center fixed; 
  width: 100%;
  height:100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  opacity: 0.3;
}
.foreground{
  position:relative;
}

HTML:

<div class="parent">
  <div class="background"></div>
  <div class="foreground">
    Put text here.
  </div>
</div>

Upvotes: 1

mark_c
mark_c

Reputation: 1212

Apply the background to html rather than body. 

html { 
    background: url(images/bg.jpg) no-repeat center center fixed;
    background-size: cover; 
}

Upvotes: 1

Related Questions