2

I want to set an image as the background for the whole page but also want to control its opacity using CSS without affecting the opacity of the content. Is it possible and if yes then how can I do it?

Currently what I have done is set the image as background using html tag, but because of that when I change opacity, the content is also affected.

html {
  background: url(https://picsum.photos/400/400); 
  /*  This image is used as an example  */
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.5
  /* Changing opacity like this also changes it for the whole content because html tag is used */
}
<h1>This is a heading</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A possimus, odio iusto libero cupiditate soluta minima quis in, officiis quod, quia laudantium deserunt veniam neque alias facere ipsam. Neque modi, atque animi pariatur reprehenderit nesciunt possimus, perspiciatis distinctio, earum corporis ipsam illo impedit maxime doloremque ad quod temporibus laboriosam quasi?</p>

<h1>This is a heading</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A possimus, odio iusto libero cupiditate soluta minima quis in, officiis quod, quia laudantium deserunt veniam neque alias facere ipsam. Neque modi, atque animi pariatur reprehenderit nesciunt possimus, perspiciatis distinctio, earum corporis ipsam illo impedit maxime doloremque ad quod temporibus laboriosam quasi?</p>

<h1>This is a heading</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A possimus, odio iusto libero cupiditate soluta minima quis in, officiis quod, quia laudantium deserunt veniam neque alias facere ipsam. Neque modi, atque animi pariatur reprehenderit nesciunt possimus, perspiciatis distinctio, earum corporis ipsam illo impedit maxime doloremque ad quod temporibus laboriosam quasi?</p>

Improve this question
0

1 Answer 1

Reset to default
0

I would wrap your content inner div. Then you can work with position too handle the opacity without affecting the background image.

* {
  margin: 0px; 
  padding: 0px;
}

.bg-img:after {
    content:'';
    background: url('https://picsum.photos/400/400') no-repeat center center;
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;  
    top:0px;
    left: 0px;
    width:100%;
    height:100%;
    z-index:-1;
    opacity: 0.2; /* Here is your opacity */
}
.bg-img {
    position: relative;
    width:100%;
    padding:50px;
    font-weight:bold;
    text-align:center;
}
<div class="bg-img">
  <h1>This is a heading</h1>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A possimus, odio iusto libero cupiditate soluta minima quis in, officiis quod, quia laudantium deserunt veniam neque alias facere ipsam. Neque modi, atque animi pariatur reprehenderit nesciunt possimus, perspiciatis distinctio, earum corporis ipsam illo impedit maxime doloremque ad quod temporibus laboriosam quasi?</p>

  <h1>This is a heading</h1>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A possimus, odio iusto libero cupiditate soluta minima quis in, officiis quod, quia laudantium deserunt veniam neque alias facere ipsam. Neque modi, atque animi pariatur reprehenderit nesciunt possimus, perspiciatis distinctio, earum corporis ipsam illo impedit maxime doloremque ad quod temporibus laboriosam quasi?</p>

  <h1>This is a heading</h1>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A possimus, odio iusto libero cupiditate soluta minima quis in, officiis quod, quia laudantium deserunt veniam neque alias facere ipsam. Neque modi, atque animi pariatur reprehenderit nesciunt possimus, perspiciatis distinctio, earum corporis ipsam illo impedit maxime doloremque ad quod temporibus laboriosam quasi?</p>

</div>

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

@Malik How to remove the white space which has come on all the four sides?
@Abdullah Which white spaces do you mean?
Looks like the image cant be added in the comment so here is the link to the image which marks the white space. The white space is on all the sides, this just shows 2 sides because a full-page snapshot couldn't be captured due to the scrollbar. ibb.co/RzL4kN9
@Abdullah ok. now i see. I updated my answer. Replace in the css : html {...} to * {...}
@Malik sure thing.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.