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

216
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; 
   
}
<div></div>

READ ALSO
MySQL ошибка: unknown option &#39;--no-beep&#39;

MySQL ошибка: unknown option '--no-beep'

Столкнулся с ошибкой: unknown option '--no-beep', вычитал, что нужна правка конфигурационного файла myini

348
Как ускорить разворачиваение бэкапа MySQL

Как ускорить разворачиваение бэкапа MySQL

Имеется бэкап баз данных размером чуть более 2GbБэкап сделан штатными средствами через mysqldump

185
Как сделать SELECT с MYSQL не с начала

Как сделать SELECT с MYSQL не с начала

Имеется скрипт который берет с БД по одному значению и пробегается от начала и до конца

183