Адаптивный бэкграунд

Troll13 · March 20, 2013

Бьюсь над проблемой целый день Есть сайт - горизонтальный параллакс, никак не удается сделать фон (виньетка снизу) адаптивным, чтобы он сжимался пропорционально при изменении расширения экрана.

Уже было испробовано много вариантов.

Картинка в <body> (почему-то не удается поставить div, только картинку)


<body>
<img id="responsive" src="img/bg_body.png" />
<div id="wrapper">
<div id="header">
</body>


#responsive {
max-width:100%;
width:100%;
height: auto;
top:40%;
left:0;
position:relative;
}

так почему-то не сжимается, хотя по правилам должен.


body{
width:7000px;
background:#000 url(../img/body.png) repeat-x scroll;
background-size: 300% auto;
-webkit-background-size: 300% auto;
-moz-background-size: 300% auto;
-o-background-size: 300% auto;
-khtml-background-size:300% auto;
}
@media screen and (min-width: 1024px) { /* Specific to this particular image */
body{
font:25px 'Stint Ultra Condensed', cursive;
color:#333;
background:#000 url(../img/body.png) repeat-x 0% 100% scroll;
background-size: 300% auto;
-webkit-background-size: 300% auto;
-moz-background-size: 300% auto;
-o-background-size: 300% auto;
-khtml-background-size:300% auto;
margin-left: -4000px;
}
}

Так сжимается, но улетает наверх. Помогите разобраться, пожалуйста, хотя бы приблизительно!

Edited March 20, 2013 by Troll13

nebovluje · March 20, 2013

Почему ни один див не закрыт?

Troll13 · March 20, 2013

в оригинале все закрыто, это просто от спешки

Troll13 · March 20, 2013

при background-size:% auto

фон при сужении окна браузера поднимается к верху, а должен сжиматься, оставаясь на месте. Как это сделать? Скриншот того, что получается внизу 0_9c71d_5f520aa9_L.jpeg.jpg

Edited March 20, 2013 by Troll13

Sign In

Адаптивный бэкграунд

Question

Troll13

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

nebovluje

Link to comment

Share on other sites

Troll13

Link to comment

Share on other sites

Troll13

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information