Верстка масштабируемого фона

Светлана Гр. · February 23, 2013

Здравствуйте!

Нужно сверстать сайт с фоном, подстраивающимся под любые экраны. Чтобы фоновая картинка была на всю ширину и высоту.

Примерно так, как здесь:

http://themes.themeg...om/?theme=Keres

http://themeforest.n...preview/3801554

Подскажите, пожалуйста, какие есть варианты. Хотелось бы обойтись без фреймворков типа Bootstrap.

Edited February 23, 2013 by Светлана Гр.

npofopr · February 23, 2013

А искали?

Березовский · February 23, 2013

background-size:cover; а вообще посмотрите на htmlbook о background-size подробнее, это именно то что Вам нужно.

Troll13 · February 23, 2013


background:#fff  url('') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='', sizingMethod='scale')";

или


background-size: 100% 100%;
-webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
-khtml-background-size:100% 100%;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='', sizingMethod='scale')";

Светлана Гр. · February 24, 2013

Спасибо большое!

Буду изучать!

Многие материалы я читала, конечно, но у меня возникли сомнения в использовании свойств CSS3, т. к. они не будут работать в старых браузерах.

А вот какой способ используется на указанных мной сайтах? Там еще и текст подстраивается.

Edited February 24, 2013 by Светлана Гр.

Troll13 · February 24, 2013

Это адаптивная тема. которая подстраивается под разные разрешения экрана. Можно сверстать на JQ скриптах (не очень хорошо), лучше на media queries. Есть хорошая книга ETHAN MARCOTTE Responsive Web Design, ее уже перевели на русский, можно найти в сети. А для работы HTML5/CSS3 есть всевозможные фиксы

Березовский · February 24, 2013

в топку старые браузеры)))

Светлана Гр. · February 25, 2013

Спасибо за книгу - уже нашла, правда предпочитаю бумажный вариант ).

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

Светлана Гр. · February 28, 2013

Сверстала. Почему-то картинка не растягивается на всю высоту. Здесь скриншот:

ссылка на изображение, размер: 150 кбайт, 1024 x 517 точек

Размер исходного изображения:1200px*669px;

CSS



html{
    height:100%;
    min-width:960px;
    font-family: Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#fff;
}
body{
    height:100%;
    margin:0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
      background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='', sizingMethod='scale')";

}
.w100{
    width:100%;
}
.w655{
    width:655px;
    margin:auto;
}
.w940{
    width:940px;
    margin:auto;
}
#wrapper{
    height:100%;
    margin:auto;
}
#main{
    min-height:100%;
    margin:0 0 -214px;
}
#inner #main{
    margin-bottom:-150px;
}
#all{
    padding:0 0 214px;
    /*min-height:350px;*/
}
#inner #all{
    padding:0 0 150px;
}
header{
    position:relative;
    padding:38px 0 0;
    height:147px;
    background:rgba(0, 0, 0, .65);
}
.sale{
    font-size:18px;
}
#cntr{
    margin:0 194px;
}
.nameComp{
    position:absolute;
    display:inline-block;
    width:93px;
    height:27px;
    background: url(name.png) no-repeat;
    text-indent:-9999em;
}
.center{
    text-align:center;
}
.left{
    float:left;
}
.right{
    float:right;
}
#menu_l{
    float:left;
    width:194px;
    text-align:right;
}
#menu_r{
    float:right;
    width:194px;
}
#logo{
    width:182px;
    height:123px;
    background: url(logo.png) no-repeat;
    margin:auto;
}
#logo a{
    display:block;
    height:123px;
    text-decoration:none;
    text-indent:-9999em;
    overflow:hidden;
}
#header_c{
    overflow:hidden;
    width:655px;
    margin:auto;
}
header nav ul{
    line-height:24px;
}
header nav a{
    font-family: 'Didact Gothic', sans-serif;
    color:#fff;
    font-size:11px;
    font-weight:bold;
    letter-spacing:1px;
    text-transform:uppercase;
    text-decoration:none;
}
header nav a:hover{
    text-decoration:underline;
}
header nav a.active{
    color:#bedb00;
}
#footer{
    height:214px;
    overflow:hidden;
}
#inner #footer{
    height:150px;
}
.strip{
    background:rgba(0, 0, 0, .65);
}
#content{
    margin-top:75px;
}

HTML



<body id="inner" style="background-image:url(maneBg_2.jpg); background-position:0 100%;">
<div id="wrapper" class="w100">
    <div id="main">
	    <div id="all">
	    <header class="strip">
		    <div id="header_c">
		    <nav id="menu_l">
			    <ul>
				    <li><a href="#">Парикмахерский зал</a></li>
				    <li><a href="#">Ногтевой сервис</a></li>
				    <li><a href="#">Косметология</a></li>
				    <li><a href="#">Массаж</a></li>
			    </ul>
		    </nav><!-- /#menu_l -->
		    <nav id="menu_r">
			    <ul>
				    <li><a href="#">Солярий</a></li>
				    <li><a href="#">Контакты</a></li>
				    <li><a href="#" class="active">Наши работы</a></li>
				    <li><a href="#">Главная</a></li>
			    </ul>
		    </nav><!-- /#menu_r -->
		    <div id="cntr">
			    <div id="logo"><a href="/">Салон красоты</a></div>
		    </div><!-- /#cntr -->
		    </div><!-- /#header_c -->
	    </header>
		    <div id="content" class="w940 clearfix">
			    <h1>Наши работы</h1>

				    <div id="carousel_wrapper" class="clearfix">
					    <div class="es-carousel">
					    <ul id="mycarousel" class="jcarousel-skin-tango">
						    <li><figure><a href="#"><img src="thumb_.jpg"></a></figure></li>
						    <li><figure><a href="#"><img src="thumb_.jpg"></a></figure></li>
						    <li><figure><a href="#"><img src="thumb_.jpg"></a></figure></li>
						    <li><figure><a href="#"><img src="thumb_.jpg"></a></figure></li>
						    <li><figure><a href="#"><img src="thumb_.jpg"></a></figure></li>
						    <li><figure><a href="#"><img src="thumb_.jpg"></a></figure></li>
						    <!--<li><figure><a href="#"><img src="thumb_.jpg"><span class="stroke"></span></a></figure></li>
						    <li><figure><a href="#"><img src="thumb_.jpg"><span class="stroke"></span></a></figure></li>
						    <li><figure><a href="#"><img src="thumb_.jpg"><span class="stroke"></span></a></figure></li>
						    <li><figure><a href="#"><img src="thumb_.jpg"><span class="stroke"></span></a></figure></li>
						    <li><figure><a href="#"><img src="thumb_.jpg"><span class="stroke"></span></a></figure></li>-->
					    </ul>
					    <!--<a href="#" id="prev">Назад</a>
					    <a href="#" id="next">Вперед</a>-->
					    </div>
				    </div><!-- /#carousel_wrapper -->
				    <p>jjjj</p>
				    <p>jjjj</p>
				    <p>jjjj</p>
				    <p>jjjj</p>
				    <p>jjjj</p>
				    <p>jjjj</p>
				    <p>jjjj</p>
				    <p>jjjj</p>
				    <p>jjjj</p>
				    <p>jjjj</p>
		    </div><!-- /#content -->
	    </div><!-- /#all -->
    </div><!-- /#main -->
    <div id="footer">
        <article class="center txtStyle_1 w655">
		    <article>
			    <span class="tel_f">+7(499) 123 45 67</span>
		    </article>
	    </article>
	    <footer class="w655">
	        <small>
		        <span class="elem"> </span>
			    <p class="center">2013, Салон красоты Криstyle</p>
		    </small>
	    </footer>
    </div><!-- /#footer -->
</div><!-- /#wrapper -->
</body>

skatadov · February 28, 2013

Попробуйте задать maneBg_2.jpg фоном для html, а из body эту картинку убрать

Светлана Гр. · February 28, 2013

Попробуйте задать maneBg_2.jpg фоном для html, а из body эту картинку убрать

Не помогло.

Вот смотрю хороший пример: http://alistapart.com/article/supersize-that-background-please

Там в body фон.

skatadov · February 28, 2013

Выложите если можно не скрин, а ссылку на рабочую страницу, чтобы вживую все посмотреть-пошевелить можно было.

Edited February 28, 2013 by skatadov

Светлана Гр. · February 28, 2013

Если заменить высоту на минимальную:

html{

min-height:100%;

}

то фон растягивается на всю высоту. Странно...

Выложите если можно не скрин, а ссылку на рабочую страницу, чтобы вживую все посмотреть-пошевелить можно было.

Хорошо, сейчас размещу.

skatadov · February 28, 2013

стер

Edited February 28, 2013 by skatadov

Светлана Гр. · February 28, 2013

Страница здесь: http://gardenflo.ru/salon/vnutr2_responsive.html

На кодировку не обращайте внимание - настройки сервера кривые.

skatadov · February 28, 2013

Попробуйте перенести все, что относится к maneBg_2.jpg от body к #main

Т.е. туда, где min-height: 100%;

Не знаю, как правильно сформулировать... Просто если высота 100%, то это выходит высота окна браузера, а если 100% - это минималка, то уже как бы считается по высоте контента. А с контентом страница выше, чем рабочая область окна браузера.

Сейчас покрутил, вроде выходит то что надо.

Светлана Гр. · February 28, 2013

Попробуйте перенести все, что относится к maneBg_2.jpg от body к #main
Т.е. туда, где min-height: 100%;
Не знаю, как правильно сформулировать... Просто если высота 100%, то это выходит высота окна браузера, а если 100% - это минималка, то уже как бы считается по высоте контента. А с контентом страница выше, чем рабочая область окна браузера.
Сейчас покрутил, вроде выходит то что надо.

Я поняла. Попробую.

Сделала у себя локально. Сработало.

Спасибо огромное!

Edited February 28, 2013 by Светлана Гр.

Светлана Гр. · March 1, 2013

На сервере тоже исправила.

Sign In

Верстка масштабируемого фона

Question

Link to comment

Share on other sites

17 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

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