CODEWITHSUNDEEP
htmlcssbackground-image
MadMan
MadMan

Reputation: 59

Background image with opacity and cover whole screen

Been playing around with CSS and for some reason I can't get the image to cover the whole screen. I managed to dip the opacity but the image won't cover the screen. 

<div class="backgroundImage">
    <img src="Image/BackgroundImage.jpg">
</div>

.backgroundImage{
    opacity: 0.4;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

However if I use the code below I can make it to cover the whole screen, but the opacity won't dip. So for some reason it is not working on a div. 

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

Upvotes: 0

Views: 8346

Answers (3)

retober
retober

Reputation: 366

You can combine multiple background images and stack them above each other. But then there is no way to control their opacity.

    .backgroundImage {
    background-image: url('http://www.css3.info/wp-content/themes/new_css3/img/sheep.png'), url('http://lorempixel.com/300/400');
    background-position: center bottom, left top;
    -webkit-background-size: 80px 60px, cover;
    -moz-background-size: 80px 60px, cover;
    -o-background-size: 80px 60px, cover;
    background-size: 80px 60px, cover;
    background-repeat: repeat-x, no-repeat;
    width: 100%;
    height: 100vh;
}

In your case the img tag is not closed. It should look like this <img src="Image.jpg">.

Further you can not specify the dimensions of an img with background-size: you should use width: and height:.

Upvotes: 3

M. Salman Khan
M. Salman Khan

Reputation: 616

Here is a demo of it: https://jsfiddle.net/a1wvdpwc/17/ I think that's the effect you want?

Just give the background div a width and height of 100%, and give it a position of fixed. Then give it a Z-index of very low so it stays at the very back. You then need to also give the image a height and width of 100%, so that it fills up the viewport. (In the demo I used vh and vw; which mean viewport-width and viewport-height, as percentages. )

Also the demo is in scss, but the only difference is that the css Img placed inside the backgroundImage styles uses a descendant selector, so it targets all Img elements that are descents of div.backgroundImage. I've put what the compiled css would look like in this answer.

Also sorry for the lack of indentation. I typed it up on a phone. I'll update it with a neater version in a few hours.

The html is: 

<div class="backgroundImage">
      <img src="http://lorempixel.com/image_output/city-q-c-640-480-6.jpg" />
</div>
<div class="content">
    Content here
</div>

The css is: 

.backgroundImage {
    Position:fixed;
    Top: 0;
    Bottom: 0;
    Width: 100vh;
    Height: 100vh;
    Opacity: 0.25;
    Z-index: -5000;
}

.backgroundImage img {
    width:100vw;
    height: 100vh;
}
.content {
    padding: 30px;
}

Also I forgot to add, (to the best of my knowledge) this method is not too good for semantics, but it shouldn't be too bad if you use it.

Upvotes: 2

Stickers
Stickers

Reputation: 78676

You can use CSS pseudo elements of either :before or :after and set the background image + opacity to it. You can either set everything to height:100%, or just use height:100vh on the div directly in order to make it to cover the whole viewport height.

Jsfiddle Example

body {
  margin: 0;
}
.container {
  position: relative;
  height: 100vh;
}
.container:before {
  background: url("https://unsplash.it/500") center / cover;
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: -1;
  opacity: 0.5;
}
<div class="container">Yes!</div>

Upvotes: 2

Related Questions