Skip to main content
R
r_tist
Inspiring
May 8, 2017
Answered

Why does this seem to overlap the content?

  • May 8, 2017
  • 2 replies
  • 1422 views

.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.

<div class="container-fluid">

        <div class="container">

            <div class="row">

            <div class="text-center">

      <h2>Heading Text</h2>

              <p>Brief description here.</p>

            </div>

              </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:

<div class="container-fluid">

    <div class="row">

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.

    This topic has been closed for replies.
    Correct answer r_tist

    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...

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    May 8, 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.

    <body class="container" or "container-fluid">

    <div class="row text-center">

          <h2>Heading Text</h2>

          <p>Brief description here.</p>

    </div>

    Nancy

    Nancy O'Shea— Product User & Community Expert
    R
    r_tistAuthor
    Inspiring
    May 8, 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?

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    May 8, 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">

    <div class="row text-center">

    <h2>Heading Text</h2>

    <p>Brief description here.</p>

    </div>

    <div class="row">

    MORE STUFF

    </div>

    <!--/container--></div>

    Nancy O'Shea— Product User & Community Expert
    O
    osgood_
    Legend
    May 8, 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.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices