Изображение рамки поверх страницы

ЕСТЬ РЕШЕНИЕ ЗАКРЫТО InstantCMS 2.X
#31 22 сентября 2017 в 19:59

вы вставили див который на моем первом примере должен был выполнять роль основного дива. закрывающий тег </div> для него вы удалили а то что выделено красным осталось.

и лучше поместить внутрь layout поскольку position:absolute идет относительно его

Нил™
Ни так ни этак! Верх регулируется, а низ устанавливается на уровне страницы, а должен быть ниже, перекрывая фон.
При установке в layout картинки сползают в границы страницы… Замкнутый круг.
А жаль неплохо получалось.
Сейчас оставил 2 элемента вверху. Что делать с низом не знаю.
Понимаю, что все устали от этого… Спасибо за помощь!
В любом случае для меня хороший практикум.
#32 27 октября 2017 в 02:44
Вот я опять со своим вопросом! Садик категорически против менять что либо в дизайне… им очень нравится!
Но встала проблема адаптивности двух картинок:
  1. <!-- верхняя часть рамки--->
  2. <div style="width:1280px; height:85px; opacity:0.9; background: url(images/ramka/top_head1060.png) repeat-x; position:absolute; top:0; left:50%; margin-left:-645px; z-index:1000;"></div>
  3.  
  4. <!-- углы лево верх, право верх, лево низ, право низ --->
  5. <div style="width:260px; height:305px; opacity:0.9; background: url(images/ramka/left_head260x430.png) no-repeat; position:absolute; left:50%; margin-left:-645px; top:0; z-index:1001;"></div>
Из ранее заявленных оставил только две и надо их сделать адаптивными. Пробовал сам, но е получилось!
Помогите картинки сделать адаптивными.
#33 29 октября 2017 в 00:30
Благодаря помощи замечательного человека Val наконец подошел к окончательному решению проблемы!
Задача адаптивно наложить две картинки поверх страницы выглядит так
  1.  
  2. body:before {
  3. content: "";
  4. display: block;
  5. position: fixed;
  6. width: 100%;
  7. height: 100%;
  8. max-width: 0 auto;
  9. max-height: 0 auto;
  10. opacity: 0.9;
  11. background: url(../images/ramka/top_head1060.png);
  12. top: 0;
  13. left: 50%;
  14. margin-left: -645px;
  15. background-size: containt;
  16. background-repeat: no-repeat;
  17. z-index: 100;
  18. pointer-events: none;
  19. }
  20. body:after {
  21. content: "";
  22. display: block;
  23. position: fixed;
  24. width: 100%;
  25. height: 100%;
  26. max-width: 260px;
  27. max-height: 305;
  28. opacity: 0.9;
  29. background: url(../images/ramka/left_head260x430.png);
  30. top: 0;
  31. left: 50%;
  32. margin-left: -645px;
  33. background-size: contain;
  34. background-repeat: no-repeat;
  35. z-index: 100;
  36. pointer-events: none;
  37. }
  38.  
Так же большое спасибо Нилу и другим принявшим непосредственное участие в решении проблемы.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.