it-swarm.com.ru

Как использовать адаптивное фоновое изображение в css3 в начальной загрузке

Я не хочу использовать тег HTML. Это мой css. Я использую Bootstrap 3.0.

background:url('images/ip-box.png')no-repeat;
background-size:100%;
height: 140px;
display:block;
padding:0 !important;
margin:0;

На 100% зуме это нормально. но когда я увеличу примерно на 180%, изображение будет коротким сверху и снизу, я хочу некоторые трюки CSS. 

46
Faizan

Для полного фонового изображения, проверьте это:

html { 
background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
69
fiskolin

Вам нужно использовать background-size: 100% 100%;

Демо

Демо 2 (Не будет растягиваться, это то, что вы делаете)

Объяснение: Вам нужно использовать 100% 100%, поскольку он устанавливает для X AS WELL AS Y, вы устанавливаете 100% только для параметра X, поэтому фон не растягивается по вертикали.


Тем не менее, изображение будет растягиваться, оно не будет отзывчивым, если вы хотите пропорционально растянуть background, вы можете искать background-size: cover;, но IE создаст для вас проблемы, так как это свойство CSS3, но да, вы можно использовать CSS3 Pie как полифилл. Кроме того, использование cover обрезает ваше изображение.

17
Mr. Alien

Я нашел это: 

Полный

Простой в использовании, полноразмерный шаблон фонового изображения для сайтов Bootstrap 3

http://startbootstrap.com/template-overviews/full/

или же

использование в вашем основном контейнере div:

html

<div class="container-fluid full">


</div>

css:

.full {
    background: url('http://placehold.it/1920x1080') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    height:100%;
}
9
raduken

Проверь это, 

body {
    background-color: black;
    background: url(img/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
4
Levent Divilioglu

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

body {
  background-image:url(img/background.jpg);
  background-repeat: no-repeat;
  min-height: 679px;
  background-size: cover;
}
1
user6060331

Путь к файлу 'images/ip-box.png' подразумевает, что css file находится на том же уровне, что и images folder.

Вероятно, чаще встречаются папки «images» и «css» на одном уровне с файлом «index.html».

Если бы это было так, и файл css находился на один уровень ниже в соответствующей папке, то путь к ip-box.jpg, как указано в файле css, был бы: '../images/ip-box.png'

1
wkille

Установить отзывчивый и удобный для пользователя фон 

<style>
body {
background: url(image.jpg);
background-size:100%;
background-repeat: no-repeat;
width: 100%;
}
</style>
0
pradip kor