CSS - цвет заливки слева от контейнера

Question

Я пытаюсь цвет заливки слева в DIV (вне контейнера) -

Она должна идти от справа от слева от контейнера до края ширины окна (даже при изменении размера). Кто-нибудь знает, как я могу это достичь? Моя первоначальная мысль повторяла изображение ширины 5px слева от того же цвета, но не уверен, что это можно сделать. Заранее спасибо.

мой логотип сидит в левом верхнем углу с этим CSS

.serviceof {  
    width: auto; 
    float: left; 
    background-color: #012051; 
    padding: 15px; 
    position: absolute; 
} 

и мой HTML

<div class="logobg" style="background-image:url(themes/startertoplight/img/logobg.png)"></div> 
<div class="serviceof"> 
<img src="themes/startertoplight/img/service.png" height="114px"> 
</div> 

Answer 1

Вы можете сделать это с парой псевдо-элементов.

Нет дополнительного HTML-кода, и он автоматически изменяет размер контейнера и ширину баннера.

* { 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
} 
 
.container { 
 
    width: 80%; 
 
    margin: auto; 
 
    border: 1px solid grey; 
 
    border-top: none; 
 
    height: 250px; 
 
} 
 
.banner { 
 
    height: 75px; 
 
    background: green; 
 
    position: relative; 
 
} 
 
.banner::before, 
 
.banner::after { 
 
    content: ''; 
 
    width: 50vw; 
 
    position: absolute; 
 
    top: 0; 
 
    height: 100%; 
 
} 
 
.banner::before { 
 
    background: rebeccapurple; 
 
    right: 100%; 
 
} 
 
.banner::after { 
 
    left: 100%; 
 
    background: inherit; 
 
}

<div class="container"> 
 
    <div class="banner"></div> 
 
</div>

Answer 2

Вы можете использовать CSS3 градиент в течение только 1 пиксель, чтобы получить жесткую линию. Возможно, вы сможете настроить следующее в соответствии с вашими потребностями.

.banner{ 
    background: #009dff; 
    background: -moz-linear-gradient(left, #009dff 150px, #006e2e 151px, #006e2e 151px); 
    background: -webkit-linear-gradient(left, #009dff 150px,#006e2e 151px,#006e2e 151px); 
    background: linear-gradient(to right, #009dff 150px,#006e2e 151px,#006e2e 151px); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#009dff', endColorstr='#006e2e',GradientType=1); 
    width: 100%; 
} 

См. Например this fiddle.

Answer 3

Попробуйте это:

.bar{ 
    width: 100%; 
    height: 114px; 
} 
.container{ 
    width:960px; 
    display: inline-block; 
    position: relative; 
} 
.serviceof{ 
    display: inline-block; 
    background-color: #012051; 
    height: 114px; 
    width: 15px; 
} 
    .logobg{ 
    background-image:url(themes/startertoplight/img/logobg.png); 
    position: relative; 
    left:0; 
    top:0; 
} 



<div class="bar"> 
    <div class="serviceof"> 
    </div> 
    <div class="container"> 
     <div class="logobg"> 
     </div> 
    </div> 
</div>