Fill DIV Seiten mit bg Farbe

Ich versuche, die beiden Seiten eines Div (mit einem Hintergrundbild), die Kind einer vollen Breite div ist.Fill DIV Seiten mit bg Farbe

Image background that needs color fill

So, das Blau auf dem Bild oben ist ein Hintergrundbild und ich muss Farbe ohne Abdeckung, um die „Lücke“ auf den Seiten füllen die tranparency des backgroung Bild. Wie erreiche ich das mit CSS?

Hier ist mein HTML:

<div id="footer-decoration" aria-hidden="true"> 
    <div class="container"></div> 
</div>

Und heres ist meine aktuelle CSS/Sass:

#footer-decoration { 
    margin-top: $grid-gutter-width; 

    >.container { 
     background: url('../img/bg-footer-top.png') center center; 
     background-color: transparent; 
     height: 50px; 
    } 
}

I Bootstrap 3, übrigens bin mit.

Danke für jede Hilfe Leute!

Quelle

2017-03-24 Ricardo Moro

ein Bild erstellen, was Sie so erreichen wollen, dass es uns zu verstehen, zu helfen. – Nimmi

Sie können die Seiten füllen, indem Sie eine Hintergrundfarbe auf die Pseudoelemente :before und :after des Containers anwenden.

body { 
 
    background: url('//i.imgur.com/7QboUH0.png') repeat; 
 
} 
 

 
#footer-decoration > .container { 
 
    background: url('//i.imgur.com/LVKQVf1.png') no-repeat; 
 
    height: 55px; 
 
    position: relative; 
 
} 
 

 
#footer-decoration > .container:after, #footer-decoration > .container:before { 
 
    content: ''; 
 
    position: absolute; 
 
    display: block; 
 
    height: 100%; 
 
    background: #fff; 
 
} 
 
#footer-decoration > .container:after { 
 
    left: -100%; 
 
    right: 100%; 
 
} 
 

 
#footer-decoration > .container:before { 
 
    right: -100%; 
 
    left: 100%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<body> 
 
    <div id="footer-decoration"> 
 
    <div class="container"></div> 
 
    </div> 
 
</body>

Quelle

2017-03-24 20:18:27

Fill DIV Seiten mit bg Farbe

Antwort

Verwandte Themen