Pedro Pedro - 26 days ago 11
CSS Question

Inserting a background banner

I'm using UI Semantic for the first time. I'm using the starter theme as given on the official example website: http://semantic-ui.com/examples/homepage.html

I'm trying to display a background-image in the banner, so I checked where the dark background is applied:

<div class="ui inverted banner-bg vertical masthead center aligned segment ">..</div>


I added the class
banner-bg
in order to apply a background-image, but it doesn't taking effect.

This is my class:

.banner-bg{
color: rgba(255, 255, 255, 0.9);
background-image: url(../../images/banner_1.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}

Answer

The reason why it isn't applied is because the CSS uses the statements in the most specific declared block.

The Theme declares the background over the following statement:

.ui.inverted.segment, .ui.primary.inverted.segment {
    background: #1B1C1D;
    color: rgba(255, 255, 255, 0.9);
}

So .ui.inverted.segment is more specific than your .banner-bg.
How to override this?

You just need to declare it more specific like .ui.inverted.segment.banner-bg


To visualize this, i made a short CodePen-Demo
I'll post the demo code also here do describe the solution:

.first.second.third{
  background: black;
  color: white;
}
.first.second.third.bg-banner{
  background: red;
}
.bg-banner{
  background: green;
}
<div class="first second third and so on">Test</div>
<div class="first second third and so on bg-banner">Test 2</div>

So the background is red, even your green statement comes later. If you add the exact same classes like in the statement above, the background gets green.

A very detailed article about this topic have CSS-Tricks: Specifics on CSS Specificity

Comments