Установите фоновое изображение веб-сайта на размер экрана

Ответ 1

вы можете сделать это с помощью этого плагина http://dev.andreaseberhard.de/jquery/superbgimage/

или

   background-image:url(../IMAGES/background.jpg);

   background-repeat:no-repeat;

   background-size:cover;

без необходимости префиксов браузеров. все это готово suporterd в обоих browers

Ответ 2

Попробуйте это,

 background: url(../IMAGES/background.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Для получения дополнительной информации следуйте Perfect Full Page Background Image!!

Ответ 3

Вы можете попробовать с помощью

.appBackground {
    position: relative;
    background-image: url(".../img/background.jpg");
    background-repeat:no-repeat;
    background-size:100% 100vh;
}

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

Ответ 4

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

background: url(../IMAGES/background.jpg) no-repeat;
background-size: auto auto;

Ответ 5

.. Я нашел, что вышеупомянутые решения не сработали для меня (по крайней мере, в текущих версиях firefox и сафари).

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

<img  src='$url' style='position:absolute; top,left:0px; width,max-height:100%; border:0;' >

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

Он также может работать для фонового изображения, хотя я отказался от попыток такого решения после того, как cover/contains не работал у меня.

Я обнаружил, что поведение, похоже, не соответствует документации, которую я могу найти где угодно - я понял, что документация должна содержать include, чтобы сделать наибольшее измерение содержащимся на экране (поддерживаемый аспект). Я обнаружил, что содержимое всегда делало мое изображение маленьким (оригинальное изображение было большим).

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

Я попробовал кучу разных вещей, начиная с включенного, но найденная высота по существу всегда игнорировалась и переполнялась. (Я пытался масштабировать не широкоэкранное изображение, чтобы быть полноэкранным на обоих, сломанный аспект подходит для меня). В основном, это то, что сработало для меня, надеюсь, что это поможет кому-то.

Ответ 6

Попробуйте это, я надеюсь, что это поможет:

position: fixed;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
background-image: url('background.jpg');

Ответ 7

Попробуйте это,

.appBg {

background-image: url(".../img/background.jpg");
background-repeat:no-repeat;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto ;
}

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

Ответ 8

Исправление фонового изображения для экранов с совместимостью браузера css

.full-screen {
    height: 100%;
    width: 100%;
    background-image: url(../images/banner.jpg);
    background-size: cover;
    background-position: center;
    //for browser compatibility
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
}

Ответ 9

Хотя есть ответы на эти ваши вопросы, но поскольку я когда-то был жертвой этой проблемы, и после нескольких поисков в Интернете я не смог ее решить, но мой напарник помог мне, и я чувствую, что должен поделиться. Примеры объяснены ниже.

Папки: web-projects/project1/imgs-journey.png

background-image:url(../imgs/journey.png);
background-repeat:no-repeat;
background-size:cover;

Мои основные пункты - это точки, если вы заметили, что мой trip.png находится в папке imgs другой папки, поэтому вы должны добавить точку в соответствии с папками с номерами, в которых хранится ваше изображение. В моем случае мое изображение trip.png сохраняется в двух папках, поэтому используется две точки, поэтому я думаю, что это может быть проблемой фоновых изображений, которые иногда не отображаются в наших кодах. Благодарю.

Ответ 10

Вы можете сделать это, как то, что я сделал с моим сайтом:

background-repeat: no-repeat;

background-size: cover;

Ответ 11

background: url("../image/b21.jpg") no-repeat center center fixed;

background-size: 100% 100%;

height: 100%;

position: absolute; 

width: 100%;