Что является лучшей практики, чтобы установить фоновое изображение по центру и 100% (так что заполняет экран, но по-прежнему сохраняет пропорции) во всех браузерах?Фоновое изображение в центре и 100% во всех браузерах
Поднять старый пост, так как есть новый способ сделать это с хорошей поддержкой браузера.
Использование background-image так:
background-size:cover;
background-position:center;
Это не разрушит пропорции изображения, но масштаб его как можно лучше никогда не предъявляя никаких черных полос (или то, что когда-либо будет в фоновом режиме).
Поддержка браузера почти идеальна, как вы можете видеть на Can I use it?. Opera Mini может быть проблемой, но браузер, скорее всего, вскоре заменит Вивальди.
В заключение я считаю, что это определенно путь, так как это на сегодняшний день самое чистое и надежное решение и очень легко редактировать с помощью JS.
Благодарим за обновление старой темы. Так я и сегодня это делаю. – jamietelin
Я не знаю, как достичь этого, установив его как фоновое изображение. Однако вы могли бы иметь изображение, которое абсолютно позиционирован
<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>
Что такое 'display: table;' for? – ANeves
для выравнивания по вертикали. он также может быть отображен: table-cell – Kasturi
Я не думаю, что вам нужно для вертикального выравнивания для работы, вертикальная выровняемость должна работать на любом встроенном элементе: http://www.htmldog.com/reference/ cssproperties/vertical-align/ – ANeves
Вы можете использовать CSS3 background-size property, но я не уверен, насколько хорошо она поддерживается. Я думаю, что большинство из них, но с префиксом:
-o-background-size
-webkit-background-size
-khtml-background-size
Лучше всего, чтобы не делать то, что вы хотите сделать.
Указывая 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" />
Проблема с этим решением заключается в том, что мне нужно сделать много и много изображений с разным разрешением. – jamietelin
Это отличный пост на двух методов для достижения этого взгляда:
Я сделал модифицированную версию Technique # 2, работает вроде okey, проверяю свой собственный ответ на вопрос. – jamietelin
Лучшее решение, которое я сумел сделать так далеко, как следует;
//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>
Возможно, это будет лучший способ? Кто-нибудь видит какие-либо проблемы с этим?
Спасибо за ваше время!
Что такое "все браузеры"? Включает ли он IE6? (Для вашего же блага, лучше не делать этого.) – ANeves
Нет, но все браузеры обновлены :) Итак, IE8, Firefox 3, Safari 4 и т. Д. ... и я имею в виду все основные браузеры, а не Camino, Miro и скоро. – jamietelin