Фон из двух картинок
Можно ли как то зафиксировать минимальное расстояниями между картинками фона?
В зависимости от разрешения экрана, они разъезжаются и съезжаются. Тобишь, при любом разрешении картинки будут выравниваться по краям экрана, даже если они начинают наезжать друг на друга. Нужно сделать так, что бы картинки не подвигались друг к другу ближе чем на 500px И что бы в случае, когда разрешение монитора не позволяет отобразить две картинки и с минимальным отступом между ними, то картинки "уезжали" за края экрана.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-position</title>
<style>
body {
background-size: 525px 454px;
background-image: url([url]http://i11.pixs.ru/storage/7/0/6/1jpg_9307135_18404706.jpg[/url]), url([url]http://i11.pixs.ru:/storage/5/5/0/3jpg_8983606_18414550.jpg[/url]), url([url]http://i11.pixs.ru:/storage/5/5/2/4jpg_1010472_18414552.jpg[/url]), url([url]http://i11.pixs.ru/storage/7/0/0/2jpg_9967660_18404700.jpg);[/url]
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-position: 0px 105px , 100% 1205px, 0px 1205px , 100% 105px ;
}
</style>
</head>
<body>
<div style="height:50px">
</div>
</body>
</html>
это код страницы. |
Anshag,
Зафиксировать минимальную ширину body body { min-width: 900px; } убить скроллинг по x при величине экрана более минимально просматриваемой части сайта (типично 700-900px по ширине)
@media screen and (min-width: 900px) {
html,body {overflow-x:hidden;}
}
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-position</title>
<style>
body {
min-width: 900px;
@media screen and (min-width: 900px) {
html,body {overflow-x:hidden;}
background-size: 525px 454px;
background-image: url(http://i11.pixs.ru/storage/7/0/6/1jpg_9307135_18404706.jpg), url(http://i11.pixs.ru:/storage/5/5/0/3jpg_8983606_18414550.jpg), url(http://i11.pixs.ru:/storage/5/5/2/4jpg_1010472_18414552.jpg), url(http://i11.pixs.ru/storage/7/0/0/2jpg_9967660_18404700.jpg);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-position: 0px 105px , 100% 1205px, 0px 1205px , 100% 105px ;
}
</style>
</head>
<body>
<div style="height:50px">
</div>
</body>
</html>
Фон пропал вовсе) |
Anshag,
Наверно руки не так ....
<html>
<head>
<meta charset="utf-8">
<title>background-position</title>
<style>
body {
min-width: 900px;
background: url(http://i11.pixs.ru/storage/7/0/6/1jpg_9307135_18404706.jpg) no-repeat 0px 105px, url(http://i11.pixs.ru:/storage/5/5/0/3jpg_8983606_18414550.jpg) no-repeat 100% 1205px, url(http://i11.pixs.ru:/storage/5/5/2/4jpg_1010472_18414552.jpg) 0px 1205px no-repeat, url(http://i11.pixs.ru/storage/7/0/0/2jpg_9967660_18404700.jpg) 100% 105px no-repeat;
background-size: 525px 454px;
}
@media screen and (min-width: 900px) {
html,body {overflow-x:hidden;}
}
</style>
</head>
<body>
<div style="height:50px">
</div>
</body>
</html>
|
Мои руки - это отдельная тема)
По поводу кода: Фон все равно продолжает выравниваться по краям, даже на устроиствах с разрешением меньше 800 х 600 и желаемое пространство между картинками не появилось - они продолжают наезжать друг на друга при маленьком разрешении. Но изменения есть. Страницу теперь можно прокрутить на ширину, указанную в коде (900 пикселей) |
Anshag,
Ширину красным нун выставить как минимум по сумме двух ширин(525px*2) картинок cлево-справо, при необходимости пространста меж ними - добавьте и его ширину min-width:1050px; |
По моему, я понял в чем дело)
должно быть не min-width:1050px; а max-width:1050px; |
Anshag,
не, тогда картинки будут съезжаться, либо Вы не пояснили, то что Вам надо Дайте ссылку на тестовик и поясните что Вас сейчас не устраивает при min-width:1050px; |
| Часовой пояс GMT +3, время: 19:25. |