- Автор темы
- #1
Есть вот код
Оно берёт картинку и ресайзит её под разрешение автоматом, но как сделать чтобы картинка была именно фоном?
HTML:
* { margin: 0; padding: 0; }
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
#content {font-family: Cuprum; width: 800px; margin: 10% 20% 0; color: #123456; font-size: 72px; text-align: center;}
a {font-weight: bold;
color: #fff;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function() {
var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg
.removeClass()
.addClass('bgheight');
} else {
$bg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(function() {
resizeBg();
}).trigger("resize");
});
</script>
<img src="5.jpg" id="bg" alt="">
<div id="content">
да и зачем так дальше?!
<div/>
Оно берёт картинку и ресайзит её под разрешение автоматом, но как сделать чтобы картинка была именно фоном?