Фото как background для страницы

Mirabo4 · October 27, 2012

Здравствуйте, захотелось мне сделать сайт у которого на фоне страниц будет фото Лондона.

Размер фото 1920 х 1080 ,но при ее размищение появляются отступы, подскажите пожалуста как спозиционировать фото так что-бы она была полностью во все окно браузера и что бы это свойство оставалось на всех мониторах. Спасибо.

Int · October 27, 2012

Отступы убираются обнулением padding и margin у html и body. Если сайту недостаточно высоты, тогда ещё height:100% надо задать, чтобы body вытянулось. Или речь о других отступах?

И что делать если разрешение экрана больше, чем 1920x1080?

А не боишься, что пользователи проклянут тебя за то, что им придётся грузить такие здоровенные картинки только ради того, что тебе захотелось няшный фон для сайта? Да ещё, как я понял, картинон несколько. А владельцы медленных компьютеров проклянут по два и три раза, потому что прокрутка страницы при таком фоне будет идти со скоростью улитки, а браузер при этом может съесть всю оперативку.

Когда у меня был duron 950, мне приходилось блокировать фон через adblock на таких вот сайтах, иначе ими было невозможно пользоваться.

Mirabo4 · October 27, 2012

обнуление уже было , с отступами вроде справился.Интерестная тема.

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

Красота требует жертв =))) я думаю потом еще сделать какой нибудь модно-гламурный эфект этой картинки =)

mrnobody · October 28, 2012

Попробуйте вот так сделать:

background-position: 50%;
background-size: cover;

Mirabo4 · October 28, 2012

html


<body>
    <div class="wrapper">
        <div class="bg">


        </div>
    </div>
 </body>

css


@import url(reset.css);
.wrapper {
    width: 1000px ; 
    height: 1000px ;
    outline:1px solid #000000;
}

.bg {
    width: 100% ; 
    height: 100% ;
    background: url(images/bg.png) no-repeat;
    background-size: contain;
}

Работает спасибо , но появились новые проблемы.

Как вы думаете что нужно сделать чтобы .wrapper автоматически становился под разширение экрана поситителя.

Какое разрешение картинки лутче всего подайдет для таких ужатий.

Спасибо.

Николя223 · October 28, 2012

единственное добавлю: background-size - очень скользкая тема )) как то применял, потом на этом сайте explorer (ниже 9-го) вообще никакого фона не показывал, лучше погуглите на тему "как узнать разрешение экрана на javascript"

хотя.. ладно вот только что придумал

кстати, проверте на больших картинках, я на маленькой смотрел -центруется даже в ie7(чет даже не верится) =)

минус нашел - не маштабируется на изменение размеров окна, надо потом ещё одну функцию дописать


  <img src="images/imag-0.png" id="fup-img" style="z-index: 0;position: fixed;height: 0px;">



<script type="text/javascript">
var height1 = window.screen.availHeight; // получаем высоту экрана от нее и отталкиваемся, и задаем высоту картинки также по ней =)
var width1 = window.screen.availWidth;  //ширина
var width_picture = "20"; //сюда прописываем точное значение ширины разрешения фото
var height_picture = "20";// тоже, только высота

var height_picture_koef = height1/height_picture; //находим коэфициент пропорции
var width_picture_new = width_picture*height_picture_koef ; // находим приблизительное новое значение ширины картинки
xxx =  document.getElementById('fup-img').style

xxx.height = height1 +"px";                    //задаем высоту картинки
xxx.left =width1/2- width_picture_new/2 +"px"; // центрируем изображение на основе полученных данных
</script>

Edited October 28, 2012 by Николя223

Mirabo4 · October 28, 2012

картинка встала очень круто =) но не ужалась , а урезалась =)

Начну изучение java , спасибо =) если есть еще какие корректировки , советы , варианты

буду рад =)

Николя223 · October 28, 2012

картинка встала очень круто =) но не ужалась , а урезалась =)
Начну изучение java , спасибо =) если есть еще какие корректировки , советы , варианты
буду рад =)

Я на больших изображениях опыты не проводил (к вечеру может затестирую на них или завтра, =) )

Вот только время хватило код подправить для центровки при изменении окна (тестил только в хроме и explorere. за остальные не ручаюсь)


  <img src="images/imag-0.png" id="fup-img" style="z-index: 0;position: fixed;height: 0px;">



<script type="text/javascript">
<!--
var height1 = window.screen.availHeight; // получаем высоту экрана
var width1 = window.innerWidth;  //ширина
var width_picture = "20"; //сюда прописываем точное значение ширины разрешения фото
var height_picture = "20";// тоже, только высота

var height_picture_koef = height1/height_picture; //находим коэфициент пропорции
var width_picture_new = width_picture*height_picture_koef ; // находим приблизительное новое значение ширины картинки
xxx =  document.getElementById('fup-img').style

xxx.height = height1 +"px";
xxx.left =width1/2- width_picture_new/2 +"px";



	 window.onresize = function() {
  height1 = window.screen.availHeight; 
 width1 = window.innerWidth;
 height_picture_koef = height1/height_picture; //находим коэфициент пропорции
 width_picture_new = width_picture*height_picture_koef ; 
 xxx.height = height1 +"px";
xxx.left =width1/2- width_picture_new/2 +"px";
 }
//-->
</script>
<!--[if IE]>
<script type="text/javascript">
/////Здесь измененная версия, начинает работать, если браузер - explorer иначе игнорится
var height1 = window.screen.availHeight; // получаем высоту экрана


var width1 = document.documentElement.clientWidth; //ширина
var width_picture = "20"; //сюда прописываем точное значение ширины разрешения фото
var height_picture = "20";// тоже, только высота

var height_picture_koef = height1/height_picture; //находим коэфициент пропорции
var width_picture_new = width_picture*height_picture_koef ; // находим приблизительное новое значение ширины картинки
xxx =  document.getElementById('fup-img').style

xxx.height = height1 +"px";
xxx.left =width1/2- width_picture_new/2 +"px";

  function window.onresize() {
  height1 = window.screen.availHeight;
 width1 = document.documentElement.clientWidth;
 height_picture_koef = height1/height_picture; //находим коэфициент пропорции
 width_picture_new = width_picture*height_picture_koef ; 
 xxx.height = height1 +"px";
xxx.left =width1/2- width_picture_new/2 +"px";



  }
</script>
<![endif]-->

Edited October 28, 2012 by Николя223

Mirabo4 · October 28, 2012

Нашел такое решение


html {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

Почти удовлетворяет.

Int · October 29, 2012

Начну изучение java , спасибо =) если есть еще какие корректировки , советы , варианты
буду рад =)

Корректирую: учи не java, а javascript.

iDrugov · October 29, 2012


html {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

Кстати, отличный способ. Работает у меня на сайте, отображается вполне корректно.

Sign In

Фото как background для страницы

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information