Фоновое изображение по центру и 100% во всех браузерах - PullRequest
Новая
       9

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

9 голосов
/ 10 мая 2010

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

Ответы [ 6 ]

9 голосов
/ 12 мая 2010

Лучшее решение, которое мне удалось сделать, заключается в следующем: 

//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>

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

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

8 голосов
/ 10 мая 2010

Лучше всего , а не делать то, что вы хотите.

Указав 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 / таблицы стилей для конкретного разрешения /

или W3C CSS медиа-запрос спецификации .

3 голосов
/ 08 апреля 2016

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

Используйте background-image как это: 

background-size:cover;
background-position:center;

Это не разрушит пропорции изображения, а увеличит его как можно лучше, не показывая черных полос (или того, что когда-либо было бы на заднем плане).

Поддержка браузера почти идеальна, как вы можете видеть на Могу ли я использовать его? . Opera Mini может быть проблемой, но браузер, вероятно, скоро будет заменен на Вивальди.

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

2 голосов
/ 10 мая 2010

Это отличный пост о двух способах достижения этого вида:

http://css -tricks.com / совершенное полностраничное-фоновое изображение /

0 голосов
/ 10 мая 2010

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

-o-background-size
-webkit-background-size 
-khtml-background-size
0 голосов
/ 10 мая 2010

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

<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>
...