Форум

Anshag · #1 (**permalink**) 15.08.2015, 13:39

Можно ли как то зафиксировать минимальное расстояниями между картинками фона?
В зависимости от разрешения экрана, они разъезжаются и съезжаются. Тобишь, при любом разрешении картинки будут выравниваться по краям экрана, даже если они начинают наезжать друг на друга.
Нужно сделать так, что бы картинки не подвигались друг к другу ближе чем на 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>

это код страницы.

Deff · #2 (**permalink**) 15.08.2015, 15:50

Anshag,
Зафиксировать минимальную ширину body
body {
min-width: 900px;
}
убить скроллинг по x при величине экрана более минимально просматриваемой части сайта (типично 700-900px по ширине)

@media screen and (min-width: 900px) {
html,body {overflow-x:hidden;}
}

Anshag · #3 (**permalink**) 15.08.2015, 16:29

Сообщение от Deff

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>

Фон пропал вовсе)

Deff · #4 (**permalink**) 15.08.2015, 17:29

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>

Anshag · #5 (**permalink**) 15.08.2015, 19:01

Мои руки - это отдельная тема)
По поводу кода:
Фон все равно продолжает выравниваться по краям, даже на устроиствах с разрешением меньше 800 х 600
и желаемое пространство между картинками не появилось - они продолжают наезжать друг на друга при маленьком разрешении.
Но изменения есть. Страницу теперь можно прокрутить на ширину, указанную в коде (900 пикселей)

Deff · #6 (**permalink**) 15.08.2015, 19:13

Anshag,
Ширину красным нун выставить как минимум по сумме двух ширин(525px*2) картинок cлево-справо, при необходимости пространста меж ними - добавьте и его ширину
min-width:1050px;

Anshag · #7 (**permalink**) 15.08.2015, 20:22

По моему, я понял в чем дело)
должно быть не
min-width:1050px;
а
max-width:1050px;

Deff · #8 (**permalink**) 15.08.2015, 20:26

Anshag,
не, тогда картинки будут съезжаться, либо Вы не пояснили, то что Вам надо
Дайте ссылку на тестовик и поясните что Вас сейчас не устраивает при
min-width:1050px;

Форум

Справочник

Discord чат

Курсы javascript