Вопросы Теги

Фоновое изображение центрируется и 100% во всех браузерах

Что лучшая практика должна установить центрируемое фоновое изображение и 100% (так, чтобы она заполнила экран, но все еще сохранила соотношение сторон) во всех браузерах?

9
задан jamietelin 10 May 2010 в 14:39
поделиться

5 ответов

Лучшая практика - не делать то, что вы хотите сделать.

Указав 100%, вы растянете (тем самым исказив) изображение.

Лучший способ иметь простой, центрированный фон выглядит так:

body {
    background-image:url(Images/MyBG.png);
    background-position:center top;
    background-repeat:no-repeat
}

EDIT:

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

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />

См: http://css-tricks.com/resolution-specific-stylesheets/

или W3C CSS media query spec.

8
ответ дан 4 December 2019 в 09:12
поделиться

Вот отличный пост о двух методах достижения такого вида:

http://css-tricks.com/perfect-full-page-background-image/

2
ответ дан 4 December 2019 в 09:12
поделиться

Я не знаю, как добиться этого, установив его в качестве фонового изображения. Однако вы могли бы иметь изображение, которое абсолютно позиционировано

<div style="position:absolute; left:0;right:0;bottom:0;top:0;display:table;vertical-align:middle;text-align:center">
<img style="max-width:100%; max-height:100%" />
</div>
0
ответ дан 4 December 2019 в 09:12
поделиться

Вы можете использовать CSS3 background-size свойство , но я не уверен, насколько хорошо оно поддерживается. Я думаю, что большинство из них работает, но с префиксом: 

-o-background-size
-webkit-background-size 
-khtml-background-size
0
ответ дан 4 December 2019 в 09:12
поделиться

Лучшее решение, которое мне удалось сделать на данный момент, выглядит следующим образом;

//CSS
<style type="text/css">
   body {
       margin:0; padding:0;
   }
   html, body, #bg {
       height:100%;
       width:100%;
   }
   #bg {
       position:absolute; 
       left:0;
       right:0;
       bottom:0;
       top:0;
       overflow:hidden;
       z-index:0;
   }
   #bg img {
       width:100%;
       min-width:100%;
       min-height:100%;
   }
   #content {
       z-index:1;
   }
</style>

//HTML
<body>
<div id="bg">
   <img style="display:block;" src="bgimage.jpg">
</div>
<div id="content">
   //Rest of content
</div>
</body>

Может быть, это лучший способ? Кто-нибудь видит какие-либо проблемы с этим способом?

Спасибо за ваше время!

9
ответ дан 4 December 2019 в 09:12
поделиться