Загрузочное фоновое изображение

Как сделать, используя bootstrap, держатель div, имеющий в качестве фона изображение, подходящее для отображения посетителей? Изображение имеет фиксированную высоту и ширину. Если размер экрана меньше, размер не должен иметь x, y overflow.

Ответы

Ответ 1

Вы можете использовать background-size следующим образом:

div.someclass {
  background-size: cover;
}

Там хорошая статья из @Chris Coyier, показывающая несколько методов: http://css-tricks.com/perfect-full-page-background-image/

Ответ 2

body {
    background="imagename.jpg";
    }

Ответ 3

Я не очень опытен в Bootstrap, но я думаю, что такой функции нет. Я рекомендую вам создать свой собственный "Bootstrap Theme", чистый CSS или LESS файл, чтобы настроить ваш фон.

Вы можете просто использовать:

body
{
    background: url(https://www.google.hu/images/srpr/logo4w.png);
    background-size: cover;
}

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

body
{
    background: url(https://www.google.hu/images/srpr/logo4w.png) no-repeat center center fixed;
    background-size: cover;
}

Ответ 4

Это сработало для меня:

body{
        background-image: url('../url') ;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        height:100%;

    }

Ответ 5

Во-первых, для фонового изображения:

div.someclass{ 
 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;
}

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

Во-вторых, чтобы содержание основной формы содержало правильное поле сверху на любом устройстве, нужно дать div, который вы только что создали для основного содержимого, относительный край сверху:

div.someclass{
 margin-top:5%;
}

измените указанные выше 5% в соответствии с вашими требованиями.