Позиционирование фона от правого края

265

20 апреля 2017, 16:03

Мне нужно спозиционировать фоновое изображение таким образом, чтобы правая половина экрана была без фона, а левая половина была с фоновой картинкой.

background-position: bottom 200px right 50% !important;

Работает неадекватно и фон ставится по центру блока. Задача вроде легкая но туплю

Нужно именно, чтобы не менялся оригинальный размер фоновой картинки, а лишнее просто заходило за левый край экрана

Answer 1

Фон слева, справа ничего, правый край всегда находится по середине. Достигается этот эффект при помощи сдвига на 50 вьюпорт-единиц от правого края.

body { 
  margin: 0; 
  background-image: url(http://placeimg.com/1200/1200); 
  background-repeat: no-repeat; 
  background-position: right 50vw top; 
}

Answer 2

Например вот так:

div{ 
  position: relative; 
  height:200px; 
  background-color: #eee; 
} 
div:before{ 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 0; 
  bottom: 0; 
  height: 100%; 
  width: 50%; 
  background-image: url('https://cdn.sstatic.net/Sites/stackoverflow/img/error-lolcat-problemz.jpg'); 
  background-position: center right; 
  background-size: inherit; 
  background-repeat: no-repeat; 
   
}