Как использовать отзывчивое фоновое изображение в 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.

Ответ 1

Для фона полного изображения проверьте следующее:

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;
}

Ответ 2

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

Демо

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

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

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

Ответ 3

Я нашел это:

Полный

Простой в использовании шаблон шаблона полного изображения для сайтов 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%;
}

Ответ 4

Проверьте это,

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;
}

Ответ 5

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

Скорее всего, у него есть папки "images" и "css" на том же уровне, что и файл index.html.

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

Ответ 6

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

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

Ответ 7

Попробуйте следующее:

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