CSS Изменение фона-высоты изображения

#css

Вопрос:

Мой css-код выглядит следующим образом:

 body
{
   background-image(url:(...));
   background-repeat: repeat-x;
   height:100%;
}

Вопрос в том … Как я могу подогнать фоновое изображение к размеру разных
экраны (1024х768) или другие….
Я имею в виду динамическое изменение высоты для каждого размера экрана?

Ответ №1:

Попробуйте вот так…

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

Взгляните на эту статью …http://css-tricks.com/perfect-full-page-background-image /

1. Вам тоже спасибо… Я не использую свойство «no-repeat», поскольку я не использую полное изображение для background…so Я использую repeat-x для создания моего фонового изображения… И свойство background-size является CSS3… это может быть проблемой в старых браузерах

2. Метод, упомянутый выше @Anish, является CSS3 и не будет работать в старых браузерах. Однако в ссылке, которую он дал, есть другие опции, которые будут отлично работать в большинстве браузеров. Я бы попробовал другие опции, отличные от CSS3, из статьи CSS-Tricks и посмотрел, какие вам больше нравятся.

Ответ №2:

Вам следует попробовать изменить класс CSS, применяемый к тегу body, с помощью javascript; Я предлагаю вам использовать библиотеку javascript, такую как jQuery, вы могли бы сделать что-то вроде этого:

 $('body').removeClass('res1');
$('body').addClass('res2');

Используя библиотеку, подобную jQuery, вам не нужно беспокоиться о несовместимости браузера.

1. Извините, но я не понял … как это мне помогает? Например: я могу проверить размер экрана (ширину и высоту) следующим образом: $ (window). height(); или $(window). width(); вопрос в том, как мне использовать это значение в CSS…it сложно, потому что фоновое изображение с использованием repeat:repeat-x;

2. вы можете создать оператор if и сказать что-то вроде: if($(window). высота = xxx) … затем $(‘body’).addClass(‘nameoftheclass’). Что вы пытаетесь сделать с этим, так это изменить размер в зависимости от разрешения; вы не собираетесь изменять CSS, просто измените класс css, который вы применяете.

Ответ №3:

 <HEAD>
<style>
body{margin:0px}
.bg{
position: absolute;
top:0px;
left:0px;
width:100%;
height:100%;
z-index:0;
}
</style>

</HEAD>
<BODY>

<img class="bg" src="pic.jpg" border="0">