Сохранение фонового изображения CSS одинаково независимо от пользовательского разрешения

Question

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

Любой способ сделать этот вид динамического изменения размера только в CSS? Или я должен изменить его до наиболее общего разрешения и надеяться на лучшее?

Answer 1

Я сделал это совсем недавно. Попробуйте плагин Fullscreenr jQuery, это здорово.

http://ajaxmint.com/2009/12/fullscreenr-lightweight-full-screen-background-plugin/

Answer 2

* { margin : 0; padding : 0; } 

html, body { height:100%; color : #FFF;} 

div#bgcontext { position : absolute; width : 100%; height : 100%; overflow : hidden; } 

div#background { position : fixed; right : 50%; width : 100%; height : 100%; z-index : -20; text-align : center;} 

div#background img { min-height: 100%; min-width : 1600px; max-width : 100%; margin-right : -100%;} 

Вот разметка ...

<div id="bgcontext"> 

<div id="background"><img src="assets/bg.jpg" /></div> 

</div> 

</body> 

Это создаст растяжение, фиксированное, сосредоточенный фоновое изображение ... вы можете адаптировать min-width и min-height по своему вкусу.