Блог

Главная - Вопросы по программированию - автоматическое изменение размера фона css-изображения в основной части

автоматическое изменение размера фона css-изображения в основной части

#css #image

#css #изображение

Вопрос:

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

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

Пожалуйста, помогите, спасибо.

  body{
            background-image:url(someimageurl);
            width:1400px;
            height:1600px;
            background-repeat:no-repeat;

        }

Комментарии:

1. Как насчет простого размещения <img> с шириной и высотой, установленными на 100%? Вы действительно хотите сделать это с помощью CSS?

Ответ №1:

Роден на правильном пути. В чистом CSS это можно сделать только с помощью CSS3, и будут работать только последние версии браузеров. Однако вы можете подделать это, поместив изображение в абсолютно правильном положении в углу страницы с шириной и высотой, установленными на 100%. Затем выполняется некоторая работа с z-индексом, чтобы поместить содержимое поверх изображения.

HTML:

 <img class="background" />
<div class="wrapper">
content goes here
</div>

CSS:

 img.background{position:fixed;top:0;left:0;width:100%;height:100%;z-index}
div.wrapper{position:relative;z-index:1;}

Смотрите это здесь — http://jsfiddle.net/snkg8/
К вашему сведению — это не будет работать в IE6 без некоторых дополнительных CSS-хаков, но я больше не беспокоюсь о IE6.

Ответ №2:

У вас есть свойство css для размера фона:

 background-size: 100%;

К сожалению, это свойство CSS3 и поддерживается только в новейших браузерах (IE9, Firefox4)

Ответ №3:

С помощью css3,

 html { 
background: url(bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Это работает во всех браузерах и ie9 .
Следующие фильтры также работают в ie7 и ie8.

 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale')";