-2

I am trying to put an image to the entire screen with full autoscale and full width and height of the screen, also ensuring that there is some opacity value of 0.6 so that the text that I try to put on top of the image should be dark and visible.

THIS IS THE CODE:

<body> <div class=bodycontainer> <h2>This text </h2> </div> </body>

CSS Code:

div.bodycontainer {

background-image:url('../images/mainbackground.jpg');
background-size:     cover;                      
background-repeat:   no-repeat;
background-position: center center; 
opacity:0.1;
}

But the image does not fit to the entire screen and also the opacity results in the opacity being applied to the text also.

bullbosaur
  • 1

1 Answers1

0

The test is the child of the .bodycontainer and will hold the opacity value, you need to remove it out in another container.

check my code:

body {
margin: 0;
padding: 0;
}
.main {
position: relative;
}
div.bodycontainer {

height: 100vh;
background-image:url('http://via.placeholder.com/1200');
background-size:     cover;                      
background-repeat:   no-repeat;
background-position: center center; 
opacity:0.3;
}

h2 {
position: absolute;
}
<div class="main">
 <h2>This text </h2>
 <div class=bodycontainer> </div>
</div>
Adam
  • 1,385
  • 1
  • 10
  • 23