Масштабное фоновое изображение

Я хотел бы масштабировать вверх и вниз фоновое изображение на моей странице. Я пробовал несколько вещей, но ничего, похоже, не работает так, как я хочу.:( URL моей страницы http://quaaoutlodge.com/drupal-7.14/ и для каждой ссылки есть другое фоновое изображение. Я знаю размер и качество изображений нужно будет оптимизировать, но я сначала хочу выяснить его техническую часть. Если кто-то угодит coudl помочь в получении этого?

Большое спасибо! Рон

Ответы

Ответ 1

То же фоновое изображение на каждой странице

Если вы хотите, чтобы фоновое изображение изменяло размер и заполняло все пространство окна, независимо от размера, затем используйте этот 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

Ответ 2

Способ достижения этого можно найти на 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

Ответ 3

Приятно видеть, что 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';

Ответ 4

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

@media all and (max-width: 699px) and (min-width: 520px) {
background-image:url('rightsizebackground.jpg');
}