Jump to content
  • 0

Бегкраунд - position: absolute


ShumNo
 Share

Question

Ребят подскажите советом как в принципе реализовать следующее:

Предположим у нас экран 1280 пикселей. Посередине у нас сайт с размером контента 980 статичный. Справа и слева остается некоторое пространство в зависимости от размера экрана (при 1024) не остается почти ничего.

Задача прилепить картинку справа и слева (position: absolute) все замечательно пока не доходит до 1024 она либо наезжает на контент сверху либо при z индексе в минус под контент. А как бы сделать, чтобы как только картинка соприкасается с границей контента она останавливалась и больная ее часть показывалась за пределами браузера? А при больших разрешениях экрана вела себя стандартно постоянно прилепленная к краю. Я конечно понимаю что такая картинка находится не в общем потоке и взаимодействовать с потоком не может, но может есть какие хитрости и трюки?

Вариант большой фоновой тут увы не подходить так как прилепленные картинки справа и слева довольно не большие 100-150px а то и еще меньше

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

Не представляю для чего тут нужны какие либо трюки, у вас ведь фиксированая ширина контента, так справа и слева от основного блока добавь по одному блоку в которых и будет бакграунд-картинка, а обёрточному оверфлоу:хидден.

Link to comment
Share on other sites

  • 0

Не очень понимаю как оверфлоу тут помогает если сам бекграунд слева и справа у нас всегда на странице ... а задача, чтобы при малом размере экрана он не влез полностью и тем самым не портил картину

Link to comment
Share on other sites

  • 0

вроде получится тоже самое контент то весь 100% залазит на страницу, а значит при 1024 правая и левая картинки останутся на странице.

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

Может быть вариант еще попробовать вставить 3-ю картинку скажем 1000х1 пикселей по середине в потоке в котором находятся и левая с правой? ...

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy