Я хотел бы масштабировать вверх и вниз фоновое изображение на моей странице. Я пробовал несколько вещей, но ничего, похоже, не работает так, как я хочу.:( URL моей страницы http://quaaoutlodge.com/drupal-7.14/ и для каждой ссылки есть другое фоновое изображение. Я знаю размер и качество изображений нужно будет оптимизировать, но я сначала хочу выяснить его техническую часть. Если кто-то угодит coudl помочь в получении этого?
Большое спасибо! Рон
Если вы хотите, чтобы фоновое изображение изменяло размер и заполняло все пространство окна, независимо от размера, затем используйте этот CSS,
html {
background: url(images/bg.jpg) no-repeat center center fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
Если вам нужно другое фоновое изображение для каждой страницы,
HTML
<div id="bg">
<img src="<?=$imgsrc;?>" alt="">
</div>
CSS
#bg {
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
}
#bg img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;
}
Источник: CSS-Tricks
Способ достижения этого можно найти на MDN:
.foo {
background-image: url(bg-image.png);
-webkit-background-size: 100% 100%; /* Safari 3.0 */
-moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100% 100%; /* Opera 9.5 */
background-size: 100% 100%; /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
-moz-border-image: url(bg-image.png) 0; /* Gecko 1.9.1 (Firefox 3.5) */
}
Ошибка IE:
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";
из https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
Приятно видеть, что html background-image используется хорошо. Поскольку некоторые разработчики зависят от css для заднего края, чтобы поддерживать обратную совместимость, многие причуды существуют для других css3 совместимых браузеров. Как background:cover в более старых версиях Safari (< 4.05), который не работает. В этом случае мы можем использовать более старый css3 резерв поставщика, как показано
html {
background: url(images/bg.jpg) no-repeat center center fixed;
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-backgound-size:100% 100%; /* early css3 implementation */
-webkit-background-size:cover;
}
И если случайно вы хотите получить разные фоновые изображения для разных страниц в чистом css, отпустите
html#bg1 {backrgound-image:url(images/bg1.jpg);}
html#bg2 {background-image:url(images/bg2.jpg);}
Но если вы не можете дать тэгу <html> id или class, вам может потребоваться некоторое javascript. Затем вы можете использовать другое фоновое изображение для каждой страницы в элементе <html>, и это именно то, что необходимо. Это, похоже, отлично работает с тегом html. Некоторые браузеры игнорируют css для background-image при использовании на html. Тег body менее темпераментен. Это может быть лучшим решением, чем метод на основе php. Например:
<script>
document.getElementsByTagName('html')[0].style.backgroundImage='url(images/bg3.jpg)';
</script>
html css для фонового размера будет продолжать применяться и корректно будет отображаться в разных версиях браузера. Обратите внимание, однако, что более старый Safari выдает ошибку на javascript, которая использует пустой URL-адрес, например, чтобы очистить фоновое изображение, например.
<script> /*Causes Error Safari 4*/
document.getElementsByTagName('html')[0].style.backgroundImage='url()';
</script>
Ошибка обычно останавливает выполнение javascript без указания причины. Вместо этого нам нужно использовать style.backgroundImage='none';
Используйте медиа-запрос в CSS, чтобы указать фоновое изображение для разных размеров экрана:
@media all and (max-width: 699px) and (min-width: 520px) {
background-image:url('rightsizebackground.jpg');
}