Возможно ли изменить размер фонового изображения веб-страницы при изменении размера окна браузера?Изменчивый фон на сайте
1
A
ответ
2
Следующий код показывает, как сделать кросс браузер фоновое изображение:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Cross Browser Background</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#content {
z-index: 1; /* The content should be above the background image */
margin: 20px 30px;
background-color: #000;
color: #FFF;
padding: 10px 15px;
/* Just add some fancy transparency */
opacity: .85; /* Standard: FF gt 1.5, Opera, Safari */
filter: alpha(opacity=50); /* IE lt 8 */
-ms-filter: "alpha(opacity=50)"; /* IE 8 */
-khtml-opacity: .50; /* Safari 1.x */
-moz-opacity: .50; /* FF lt 1.5, Netscape */
}
</style>
<!-- IE6 sucks as usual - Add some special code for it -->
<!--[if IE 6]>
<style type="text/css">
html {
overflow-y: hidden;
}
body {
overflow-y: auto;
}
#background {
position:absolute;
z-index:-1;
}
#content {
position:static;
}
</style>
<![endif]-->
</head>
<body>
<img id="background" src="background.jpg" alt="" />
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam placerat justo, in tincidunt purus faucibus quis. Pellentesque facilisis mi id neque laoreet laoreet. Quisque quis metus vitae enim lacinia egestas eu at ipsum. Proin sed justo massa, non consequat lacus. Nullam pulvinar commodo egestas. Vivamus commodo ligula a turpis mattis facilisis. Vestibulum vel massa a lorem pulvinar varius nec ut justo. Donec hendrerit dapibus erat. Aenean interdum, lorem sit amet venenatis tincidunt, augue ipsum tincidunt velit, vel egestas nulla quam non quam. Mauris vulputate libero at purus auctor sed egestas magna vehicula.</p>
</div>
</body>
</html>
2
Если вы используете CSS3 у вас есть новое свойство, называемое background-size
, который можно использовать, как это для достижения желаемого результата:
body {
background: url(bgimage.jpg) no-repeat;
background-size: 100%;
}
Имейте в виду, что CSS3 еще не полностью поддерживается всеми браузерами (особенно IE), и результаты могут варьироваться в зависимости от того, с каким браузером вы просматриваете страницу. Тем не менее, надеюсь, что это поможет!
Если вы хотите что-то более дружественное к браузеру, вы можете рассмотреть решение javascript, которое будет захватывать размеры окон и растягивать изображение соответственно.
1
Да, как это:
<img id="background" src="..." alt="Background Image" />
img#background {
position: absolute;
top: 0;
left: 0;
width: 100%
height: 100%;
}
Смежные вопросы
- 1. Изменчивый фон с использованием CSS
- 2. Фон на сайте обрезается
- 3. Полный фон на сайте javascript
- 4. Как сделать повторяющийся фон на моем сайте?
- 5. IOS - iPhone CSS фон вопрос на сайте
- 6. Сохраняйте тот же фон на моем сайте
- 7. jQuery -onClick - Как изменить фон на каждой странице на сайте
- 8. Google Ad на сайте переполняется на бежевый фон
- 9. Изменчивый GameObject в единстве3d
- 10. indexPath не изменчивый? Swift
- 11. Когда использовать изменчивый модификатор?
- 12. KendoUI Изменчивый виджет?
- 13. Сортировка изменчивый словарь на основе значений него
- 14. ListView прокрутка изменчивый и медленный на Android
- 15. 'изменчивый' в определении типа
- 16. Изменчивый компонент Java
- 17. NSUserDefaults возвращает изменчивый массив
- 18. Как сделать изменчивый ItemizedOverlay
- 19. C++ define изменчивый макрос
- 20. Как изменить фон на веб-сайте при нажатии кнопки?
- 21. Как получить полный фон на сайте, подходящем для разрешения экрана?
- 22. Кнопки, не отображаемые на веб-сайте, должны иметь белый фон
- 23. Непрерывный фон Выполнение PHP-файла на моем сайте
- 24. Как сделать фон из 3-х частей на сайте
- 25. ExtJS 4.2 изменчивый, перетаскиваемый компонент
- 26. изменчивый тип внутри неизменяемого контейнера
- 27. «Изменчивый» Строка Java действует непредсказуемо
- 28. Как использовать изменчивый многоадресный итератор?
- 29. Изменчивый атрибут jquery не работает
- 30. Наведите на сплошной фон?