Pedro Pedro - 3 months ago 36
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:

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
in order to apply a background-image, but it doesn't taking effect.

This is my class:

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;


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:

  background: black;
  color: white;
  background: red;
  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