Позиционирование фона CSS

181
21 июля 2017, 03:04

Есть следующий макет - http://prntscr.com/fxhby1

Синий фон нужно спозиционировать так чтобы на его фоне была надпись войти, пробовал сделать через linear-gradient, но проблема в том что при увеличении или уменьшении экрана блок перемещается, то влево то в право. - background-image: linear-gradient(to right, #fff 70%, #2a7fe0 30%).

Так же пробовал сделать псевдо селектор для контейнера, но проблема в том что слайдер не входит в контейнер.

Answer 1

Немного не понял в какой контейнер не входит слайдер, но псевдоселектором сделать можно так: 

header { 
  height: 300px; 
  background: #ddd; 
  position: relative; 
} 
 
header:before { 
    content: ''; 
    display: block; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 50%; 
    right: 0; 
    margin-left: 80px; 
    background: #2a7fe0; 
} 
 
.centered { 
  position: relative; 
  width: 320px; 
  min-height: 200px; 
  margin: -250px auto 0 auto; 
  background: #999; 
}
<header></header> 
<div class="centered">test</div>

READ ALSO
Обрезается фон при масштабировании
CSS

Обрезается фон при масштабировании

При масштабировании страницы, появляются странные отступы от краев браузера при 100% ширине: Вот так выглядит при 100% обзоре в браузере, то есть...

 248
Calc и переменные в SASS
CSS

Calc и переменные в SASS

Написал переменнуюНачинаю представлять ее в calc

 188
Можно ли объявлять классы в SVG-файле через &lt;style&gt;?
CSS

Можно ли объявлять классы в SVG-файле через <style>?

Можно ли объявлять классы в SVG-файле, испольуя <style>?

 232
Сложная выборка из двух таблиц
MySQL

Сложная выборка из двух таблиц

Таблица № 1 (сообщения пользователям)

 191