Я только начинаю с веб-сайта, и я уже сталкиваюсь с небольшой проблемой, когда я не могу найти конкретное решение.
Я хотел сделать свой сайт подходящим для любого размера экрана по ширине, высота не имеет значения.
Это ссылка на мое изображение:
../IMAGES/background.jpg
ИЗМЕНИТЬ
Я понятия не имею, что неправильно, но по какой-то причине тело даже не хочет получать фоновое изображение. Он просто отображает простой белый фон.
body
{background-image:url(../IMAGES/background.jpg);}
вы можете сделать это с помощью этого плагина http://dev.andreaseberhard.de/jquery/superbgimage/
или
background-image:url(../IMAGES/background.jpg);
background-repeat:no-repeat;
background-size:cover;
без необходимости префиксов браузеров. все это готово suporterd в обоих browers
Попробуйте это,
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!!
Вы можете попробовать с помощью
.appBackground {
position: relative;
background-image: url(".../img/background.jpg");
background-repeat:no-repeat;
background-size:100% 100vh;
}
работает для меня:)
Попробуйте следующее:
background: url(../IMAGES/background.jpg) no-repeat;
background-size: auto auto;
.. Я нашел, что вышеупомянутые решения не сработали для меня (по крайней мере, в текущих версиях firefox и сафари).
В моем случае я на самом деле пытаюсь сделать это с помощью тега img, а не фонового изображения, хотя он также должен работать для фонового изображения, если вы используете z-height:
<img src='$url' style='position:absolute; top,left:0px; width,max-height:100%; border:0;' >
Это масштабирует изображение в полноэкранном режиме (возможно, нарушает соотношение сторон), что было тем, что я хотел сделать, но имел трудный поиск.
Он также может работать для фонового изображения, хотя я отказался от попыток такого решения после того, как cover/contains не работал у меня.
Я обнаружил, что поведение, похоже, не соответствует документации, которую я могу найти где угодно - я понял, что документация должна содержать include, чтобы сделать наибольшее измерение содержащимся на экране (поддерживаемый аспект). Я обнаружил, что содержимое всегда делало мое изображение маленьким (оригинальное изображение было большим).
Контейнер был с некоторыми хаками ближе к тому, что я хотел, чем к обложке, что похоже на то, что аспект поддерживается, но изображение масштабируется, чтобы сделать малейшее измерение соответствием экрану - т.е. всегда делать изображение настолько большим, насколько это возможно, до тех пор, пока один из размеров будет заштрихован...
Я попробовал кучу разных вещей, начиная с включенного, но найденная высота по существу всегда игнорировалась и переполнялась. (Я пытался масштабировать не широкоэкранное изображение, чтобы быть полноэкранным на обоих, сломанный аспект подходит для меня). В основном, это то, что сработало для меня, надеюсь, что это поможет кому-то.
Попробуйте это, я надеюсь, что это поможет:
position: fixed;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
background-image: url('background.jpg');
Попробуйте это,
.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 ;
}
Это работает для меня
Исправление фонового изображения для экранов с совместимостью браузера 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;
}
Хотя есть ответы на эти ваши вопросы, но поскольку я когда-то был жертвой этой проблемы, и после нескольких поисков в Интернете я не смог ее решить, но мой напарник помог мне, и я чувствую, что должен поделиться. Примеры объяснены ниже.
Папки: web-projects/project1/imgs-journey.png
background-image:url(../imgs/journey.png);
background-repeat:no-repeat;
background-size:cover;
Мои основные пункты - это точки, если вы заметили, что мой trip.png находится в папке imgs другой папки, поэтому вы должны добавить точку в соответствии с папками с номерами, в которых хранится ваше изображение. В моем случае мое изображение trip.png сохраняется в двух папках, поэтому используется две точки, поэтому я думаю, что это может быть проблемой фоновых изображений, которые иногда не отображаются в наших кодах. Благодарю.
Вы можете сделать это, как то, что я сделал с моим сайтом:
background-repeat: no-repeat;
background-size: cover;
background: url("../image/b21.jpg") no-repeat center center fixed;
background-size: 100% 100%;
height: 100%;
position: absolute;
width: 100%;