0

I would like to use a semi-transparent color overlay on my html section, but it does not cover the entire section. This is what I got so far:

#main {
    padding-top: 50px;
    padding-bottom: 50px;
    background-image: url('https://cdn.pixabay.com/photo/2020/12/23/08/00/bow-lake-5854210_960_720.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    position: relative;
    z-index: 1;
}

#main::before {
    background-color: rgba(0, 0, 0, 0.80);
    content: '';
    height: 100%;
    position: absolute; 
    width: 100%; 
    z-index: -1;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<section id="main">

    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <h1>This is a text block</h1>
                <p>This will only contain text which the user can edit from the admin via a text editor. Paddings, bg color/image are controlled via css file.</p>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic ratione saepe quidem quo corrupti rem accusantium ex dolorem explicabo odio quae quos illo, voluptates maiores.</p>
            </div>

            <div class="col-lg-6">
                <h1>This is a text block</h1>
                <p>This will only contain text which the user can edit from the admin via a text editor. Paddings, bg color/image are controlled via css file.</p>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic ratione saepe quidem quo corrupti rem accusantium ex dolorem explicabo odio quae quos illo, voluptates maiores.</p>
            </div>
        </div>
    </div>

</section>

The problem is the color overlay isn't displaying correctly all the time and in all screen sizes because I'm using padding top and bottom in the #main. For large screensizes it helps if I add some margin top to the before element, but in smaller screen sizes it won't help. How can I make sure the color overlay always covers the entire section regardless of the screensize and if I use padding top and bottom in the #main? Thanks

PapT
  • 603
  • 4
  • 14
  • 30

3 Answers3

1

Add this ruleset to #main::before:

top: 0;
left: 0;
right: 0;
bottom: 0;

Also, remove height: 100% and width: 100%.

s.kuznetsov
  • 14,870
  • 3
  • 10
  • 25
1

You just need to set top: 0 on your pseudo element.

#main {
    padding-top: 50px;
    padding-bottom: 50px;
    background-image: url('https://cdn.pixabay.com/photo/2020/12/23/08/00/bow-lake-5854210_960_720.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    position: relative;
    z-index: 1;
}

#main::before {
    background-color: rgba(0, 0, 0, 0.80);
    content: '';
    height: 100%;
    position: absolute; 
    width: 100%; 
    z-index: -1;
    top: 0;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<section id="main">

    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <h1>This is a text block</h1>
                <p>This will only contain text which the user can edit from the admin via a text editor. Paddings, bg color/image are controlled via css file.</p>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic ratione saepe quidem quo corrupti rem accusantium ex dolorem explicabo odio quae quos illo, voluptates maiores.</p>
            </div>

            <div class="col-lg-6">
                <h1>This is a text block</h1>
                <p>This will only contain text which the user can edit from the admin via a text editor. Paddings, bg color/image are controlled via css file.</p>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic ratione saepe quidem quo corrupti rem accusantium ex dolorem explicabo odio quae quos illo, voluptates maiores.</p>
            </div>
        </div>
    </div>

</section>
disinfor
  • 10,865
  • 2
  • 33
  • 44
0

Set top, bottom, left and right position for your overlay instead of width and height, like this:

#main {
    padding-top: 50px;
    padding-bottom: 50px;
    background-image: url('https://cdn.pixabay.com/photo/2020/12/23/08/00/bow-lake-5854210_960_720.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    position: relative;
    z-index: 1;
}

#main::before {
    background-color: rgba(0, 0, 0, 0.80);
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<section id="main">

    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <h1>This is a text block</h1>
                <p>This will only contain text which the user can edit from the admin via a text editor. Paddings, bg color/image are controlled via css file.</p>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic ratione saepe quidem quo corrupti rem accusantium ex dolorem explicabo odio quae quos illo, voluptates maiores.</p>
            </div>

            <div class="col-lg-6">
                <h1>This is a text block</h1>
                <p>This will only contain text which the user can edit from the admin via a text editor. Paddings, bg color/image are controlled via css file.</p>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic ratione saepe quidem quo corrupti rem accusantium ex dolorem explicabo odio quae quos illo, voluptates maiores.</p>
            </div>
        </div>
    </div>

</section>

It will expand overlay over its whole parent. Other way is to set position at some corner, e.g. top and left and width and height to 100%.

Better doc here

Som-1
  • 601
  • 7
  • 16