Проблемы с масштабированием фона полной страницы CSS - PullRequest
Новая
       4

Проблемы с масштабированием фона полной страницы CSS

0 голосов
/ 20 августа 2010

Как мне сделать фоновое изображение на всю страницу и не растягивать его ( что-то вроде этого )?

<html>
<style>
   html, body {height:100%;}
     #background {
     min-height:100%;
     min-width:1024px;
     width:100%;
     height:auto;
     position:fixed;
     top:0;
     left:0;
     z-index:-1;
  }
   @media screen and (max-width: 1024px){ #background{left:50%;margin-left:-512px;}}
</style>

</head>
<body>
   <img id="background" src="http://www.iwallpapers.in/bulkupload/C/Mountains/Mountains%2040.jpg" alt="" />
</body>
</html>

Pastebin здесь

РЕДАКТИРОВАТЬ:

Приведенный выше код может лучше проиллюстрировать мою цель.Когда вы измените размер окна, скажем, на 400 пикселей, вы получите пустое место под изображением .Я хочу, чтобы изображение заполнило все окно и сохранило его пропорции.

<!DOCTYPE html>
<html lang="en">
<head><head>
<title></title>
<style>
*{margin:0; padding:0;}
#wrap{ 
    width:100%; 
    height:auto; 
    margin:0 auto;  
}
#bg{ width:100%}
</style>
</head>

<body>
    <div id="wrap">
        <img src="http://www.bmwgallery.co.uk/bmw-motorcycles/bmw-s1000rr-superbike-motorcycle-large.jpg" id="bg" />
    </div>
</div>

</body>
</html>

Ответы [ 2 ]

0 голосов
/ 20 августа 2010

Вы также можете использовать фон вспышки (изображение как SWF, возможно, добавьте некоторый эффект).

http://webarto.com/kontakt

Кроме того, ваше изображение должно быть как-то изолировано, чтобы не растянуть,На сайте PL изображение выкрашено в черный цвет по бокам, фиксировано по высоте.

0 голосов
/ 20 августа 2010

Если вы хотите динамически изменить фон, я думаю, вы должны использовать JavaScript. Если вы не хотите, чтобы изображение деформировалось, вы должны использовать одно измерение и сохранить соотношение сторон, например: 

<!doctype HTML>
<html>
<head>
<style type = "text/css">
#backgroundDiv{position:absolute;}
</style>
<script type="text/javascript" language="JavaScript" src="jquery-1.4.2.min.js"></script>
<script type ="text/javascript" language="JavaScript">
function resizeImg(){
        var h = parseInt($(document).height()) - 50;
                var imgh = $("#bg-image").height();
                var imgw = $("#bg-image").width();
        $("#bg-image").height(h);
        $("#bg-image").width(Math.floor(imgw*(h/imgh)));
}
$(document).ready(function(){
        resizeImg();
        $(window).resize(function(){
                resizeImg();
        });
});
</script>
</head>
<body>
<div style = "height:100%;width:100%;" id = "backgroundDiv"><img src = "slider-image.jpg" id = "bg-image"></div>
</body>
</html>

Надеюсь, это поможет! (попробуйте настроить z-индекс изображения, если вы хотите сделать его в фоновом режиме)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...