Фон по ширине (и только) div-а. Как сделать?

458
04 февраля 2017, 09:37

Нужно чтобы фон был 100 процентным по ширине, но не по высоте. Если блок выше исходника фона, то просто повторять фон background-repeat по вертикали.

Answer 1

Укажите background-size 100% по ширине, a по высоте - auto

background-size: 100% auto;
Answer 2

Чтобы использовать фон на 100% ширины, надо прописать width: 100%; у блока div. НО, фон как background-image не будет виден, пока у блока нет никакой высоты. Так что, размер по-любому нужен для высоты(ты можешь его не указывать, если пишешь в блоке текст или добавляешь другие элементы).

.kek{
    width: 100%;
    height: 1000px;
    background-image: url("http://www.zooclub.ru/skat/img.php?w=700&h=700&img=./attach/12000/12669.jpg");
    background-repeat: repeat-y;
  }
Answer 3

.block { 
  width:100px; 
  height:500px; 
  background-image:url('https://cdn.sstatic.net/Sites/stackoverflow/img/error-lolcat-problemz.jpg'); 
  background-size: 100% auto; 
  background-repeat: repeat-y; 
}
<div class='block'></div>

READ ALSO
css calc от чего берется 100%

css calc от чего берется 100%

Откуда берется 100% в выражении

452
Qt. QUDPSocket. Реализия клиент-серверной модели

Qt. QUDPSocket. Реализия клиент-серверной модели

Написал два класса (по сути одинаковых, за исключением что класс UDPClient, имеет строку client->bind(2424);)Как реализовать обмен сообщениями между...

529
Обработка строки даты

Обработка строки даты

Пользователь вводит дату в формате 01/02/17, нужно сохранить дату в трёх переменных int соответственно-day,month,yearЯ разбивал строку с датой на 3 подстроки...

417
Динамическое выделение памяти с++

Динамическое выделение памяти с++

Вопрос заключается в необходимости оператора newОн предназначается для динамического выделения памяти, то есть во время выполнения программы,...

456