Why does this seem to overlap the content?

Report · May 08, 2017

.container-fluid {

opacity: 0.3;

background-color: #45abe1;

z-index: -1;

}

.container {

background-color: transparent;

margin: 0 auto;

position: relative;

padding:0px!important;

}

What would be a better way to frame this off? My issue is that .container-fluid seems to be overlapping the .container with content/text I have within.

<h2>Heading Text</h2>

<p>Brief description here.</p>

</div>

The last 2 closing divs come after a series more of what's below within. They have their own content with the correct closing tags surrounding their respective content:

Wondering if it's the duplicate of the container-fluid for each block that winds up somehow overlapping again & again... causing the teal background with opacity applied to overlay the text/content?

Thank you.

Report · May 08, 2017

Throwing us a small bit of code is not enough to determine what the problem could be.

Its not the problem but I dont know why you have z-index declared on a container which is not absolutely or relatively positioned unless you have duplicated the selector elsewhere and set it to absolute or relative.

.container-fluid {

opacity: 0.3;

background-color: #45abe1;

z-index: -1;

}

Most likely the cause of your issue is something else in the page or css. We would need to see that to help.

Report · May 08, 2017

I can't think of any situation where you need both a container-fluid (full width) and a container. Which is it? Do you want full screen width or not? In fact, I often use one container for the entire document.

<h2>Heading Text</h2>

<p>Brief description here.</p>

</div>

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · May 08, 2017

Wanted the container fluid for the background color of that div to span screen edge to edge.

So if I revert back to standard 'container' how will it "know" I need that color coverage in the background, but only the text content within the main centralized area of the page?

Report · May 08, 2017

Then put your background on <body> selector which fills the screen. And use a <div class="container"> to hold page content.

<body>

<div class="container">

<h2>Heading Text</h2>

<p>Brief description here.</p>

</div>

MORE STUFF

</div>

</div>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · May 08, 2017

I think this is the issue right here:

Note: When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read. If you do not want to apply opacity to child elements, use RGBA color values instead (See "More Examples" below).

I will adjust the hex to rgba...

Report · May 09, 2017

I see that you are quoting from CSS3 opacity property

Did the fix help resolve your issue?

Thanks,

Preran

Why does this seem to overlap the content?

1 Correct answer