Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up

Фон на ширину экрана


Recommended Posts

Доброго дня , подскажите как с помощью css "раздвинуть" фон модуля на ширину экрана 

 

Screenshot_1.jpg

Link to post
Share on other sites

Это не в css, а в шаблоне модуля. Алгоритм такой:

1) выходите их контейнера (class container), на вскидку 1 или 2 закрывающих дива (</div>),

2) создаете новый блок div, он растекается по всей ширине дисплея, присваиваете ему класс с фоном/бэкграундом,

3) в нем создаете свой контейнер,

4) в него заворачиваете модуль,

5) закрываете контейнер модуля,

6) закрываете блок с вашим фоном,

7) снова возвращаете в магазин закрытый контейнер (что бы нижестоящий контент не поплыл) с 1 или 2 div'ами.

Link to post
Share on other sites

Самое простое решение- модуль Free Positions.

Он создает две широкоэкранные позиции под Главным меню и над Футером.

И нужный блок выводите в одну из этих позиций.

 

Хотя, вышеприведенное решение можно попробовать. Причем, прямо в инспекторе кода.

Но там сложнее конструкция

div.container

  div.row

    div#content

      код модуля, который как правило идет без обертки, а сразу с H3 начинается

Суть правок кода модуля:

в самом начале модуля надо добавить </div></div></div> (закрываем три ранее открытых блока.)

после кода модуля снова открыть блоки

div.container

  div.row

    div#content-1 ( добавить-1) ( снова открываем блоки, чтобы не страдал контент внизу страницы)

 

и уже что-то будет видно, но это еще не все....

Мне кажется важным в данном случае добавить модулю две обертки

сначала class="container-fluid my-module" для стилизации.

а потом class="container" для возврата контента в рамки контейнера..

а потом еще разобраться с высотой блока  div#content

а потом еще что-то вылезет.

 

Мне кажется, проще добавить две широкоэкранные позиции модулем. 

 

Edited by jaffagold
Link to post
Share on other sites

2 часа назад, jaffagold сказал:

Самое простое решение- модуль Free Positions.

Он создает две широкоэкранные позиции под Главным меню и над Футером.

И нужный блок выводите в одну из этих позиций.

 

Мне кажется, проще добавить две широкоэкранные позиции модулем. 

 

К сожалению , данный модуль под 2.3  у меня 2.1 

Link to post
Share on other sites

3 часа назад, zlatoff сказал:

Это не в css, а в шаблоне модуля. Алгоритм такой:

1) выходите их контейнера (class container), на вскидку 1 или 2 закрывающих дива (</div>),

2) создаете новый блок div, он растекается по всей ширине дисплея, присваиваете ему класс с фоном/бэкграундом,

3) в нем создаете свой контейнер,

4) в него заворачиваете модуль,

5) закрываете контейнер модуля,

6) закрываете блок с вашим фоном,

7) снова возвращаете в магазин закрытый контейнер (что бы нижестоящий контент не поплыл) с 1 или 2 div'ами.

Спасибо , вряд ли получится сделать самостоятельно . Но попытаюсь :)

Link to post
Share on other sites

Дайте ссылку на сайт, можно в личные сообщения

 

Смотрите, вот же для 2.1 от того же автора

Вот такой вид можно получить( на фон блоков смотрите)

Спойлер

spu-ea68c8-ogi2-3cwn3bmfojjlb56e.jpg.666

 

Edited by jaffagold
Link to post
Share on other sites

12 часов назад, jaffagold сказал:

Дайте ссылку на сайт, можно в личные сообщения

 

Смотрите, вот же для 2.1 от того же автора

Вот такой вид можно получить( на фон блоков смотрите)

  Показать контент

spu-ea68c8-ogi2-3cwn3bmfojjlb56e.jpg.666

 

Спасибо ,.Это то , что нужно :)

Link to post
Share on other sites

В 02.02.2018 в 10:48, zlatoff сказал:

Это не в css, а в шаблоне модуля. Алгоритм такой:

1) выходите их контейнера (class container), на вскидку 1 или 2 закрывающих дива (</div>),

2) создаете новый блок div, он растекается по всей ширине дисплея, присваиваете ему класс с фоном/бэкграундом,

3) в нем создаете свой контейнер,

4) в него заворачиваете модуль,

5) закрываете контейнер модуля,

6) закрываете блок с вашим фоном,

7) снова возвращаете в магазин закрытый контейнер (что бы нижестоящий контент не поплыл) с 1 или 2 div'ами.

c css знаком неделю , по вашему методу сделал - заработало 

сделал так :

</div>
</div>
</div>
</div>
<div id="fon10">
        <div class="container-fluid">
            <div class="row">
              тут разместил модуль 

так правильно ?

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.