Фон на всю страницу css: Как растянуть фон на всю ширину окна?

Leave a Comment / Css / By /

Верстка слоя-подкладки во всю ширину viewport

Блог / Танцы с CSS / Верстка слоя-подкладки во всю ширину viewport

В лендинговой верстке дизайнеры часто прибегают к следующему приему — фон одного или нескольких блоков растягивается на всю ширину документа. При этом максимальная ширина содержимого блоков чаще всего ограничена.

Если шаблон изначально верстается с учетом таких особенностей шаблона, то максимальная ширина контентной области ограничивается внутри каждого wrapper-контейнера. Каждый отдельный горизонтальный блок при этом имеет ширину равную 100% ширины документа.

<div> <div> … </div> </div> <div> <div> … </div> </div> … <div> <div> … </div> </div> <style> .wrapper { width: 100%; } .content { max-width: 1000px; margin: 0 auto; } </style>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<div>

  <div> . .. </div>

</div>

<div>

  <div> … </div>

</div>

…

<div>

  <div> … </div>

</div>

<style>

  .wrapper {

    width: 100%;

  }

  .content {

    max-width: 1000px;

    margin: 0 auto;

  }

</style>

Такая верстка позволит определить настройки фона индивидуально для каждого контейнера, задавая стили для выбранной секции.

Если же изначально использовался общий wrapper с ограничением ширины, а разбивка на отдельные контейнеры трудоёмка (влечет за собой рефакторинг большого числа шаблонов), то есть имеет структуру подобную следующей:

<div> <div> <div> … </div> </div> <div> <div> … </div> </div> … <div> <div> … </div> </div> </div> <style> .

wrapper { max-width: 1000px; margin: 0 auto; } </style>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<div>

  <div>

     <div> … </div>

  </div>

  <div>

     <div> … </div>

  </div>

  …

  <div>

     <div> … </div>

  </div>

</div>

<style>

  .wrapper {

    max-width: 1000px;

    margin: 0 auto;

  }

</style>

То растянуть фон на всю ширину документа для выбранной секции можно используя следующую технику (добавляем в CSS):

#sectionN { position: relative; } #sectionN:before { position: absolute; top: 0; bottom: 0; left: 0; right: 0; content: «»; // укажите параметры вашего фона background: url(. ..) top center repeat; // продляем фон за границы контейнера padding-right: 9999px; margin-right: -9999px; padding-left: 9999px; margin-left: -9999px; } #sectionN .content { position: relative; } body { // чтобы избежать появления горизонтального scrollbar overflow-x: hidden; }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

#sectionN {

  position: relative;

}

#sectionN:before {

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  content: «»;

  // укажите параметры вашего фона

  background: url(…) top center repeat;

  // продляем фон за границы контейнера

  padding-right: 9999px;

  margin-right: -9999px;

  padding-left: 9999px;

  margin-left: -9999px;

}

#sectionN . content {

  position: relative;

}

body {

  // чтобы избежать появления горизонтального scrollbar

  overflow-x: hidden;

}

Я использовал псевдо-контейнер, но это может быть и специальный слой в верстке. Смысл в том, что он повторяет размеры секции, но по краям выходит за границы на 9999 пикс, заливая фоном всю горизонталь.

Написать комментарий

Данная запись опубликована в 16.04.2019 12:50 и размещена в Танцы с CSS. Вы можете перейти в конец страницы и оставить ваш комментарий.

 

Комментарии к «Верстка слоя-подкладки во всю ширину viewport»

Понравилась статья? Есть вопросы? — пишите в комментариях.

Как установить полный цвет фона страницы в Tailwind css?

спросил

Изменено 6 месяцев назад

Просмотрено 29 тысяч раз

Как установить полный фон страницы в Tailwind?

Единственный атрибут, который я могу использовать, это h-экран , но это не работает, когда я изменяю размер браузера.

Вот мой код:

 <тело>

Пример полного html:

 

    <голова>
        <мета-кодировка="utf-8">
        лкджх
        
        
    
    <тело>
        
а
а





а



а


а

а
а
а
а
а

    

 92,0,2 дюйма  
 
     
  •  попутный ветер-CSS 
    •  
 




            1
     
 
 Изменить  h-экран  на  min-h-экран  
 




            1
     
  
 Краткий ответ 
 
 изменить  h-экран  на  min-h-экран  . 
 
 
 Но почему? 
  

 
  h-screen  : принимает высоту области просмотра. 

 
  
 Что происходит при прокрутке? 
  
 Теперь "общая высота" равна "высоте окна просмотра + высота прокрутки"
                                👆 👆
                               дополнительная высота h-экрана
 
 
 
 Таким образом, он не расширяется, чтобы иметь высоту всего экрана во время прокрутки, поэтому это можно преодолеть, используя  min-h-screen  , что означает, что минимум должен быть высотой области просмотра, а при прокрутке расширяйтесь иметь максимально возможную высоту.
 Зарегистрируйтесь или войдите в систему 
 Зарегистрируйтесь с помощью Google
 Зарегистрироваться через Facebook
 Зарегистрируйтесь, используя адрес электронной почты и пароль
 Опубликовать как гость 
 Электронная почта
 Обязательно, но не отображается
 Опубликовать как гость 
 Электронная почта
  Требуется, но не отображается
 Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.
 Справочное руководство
 CSS по настройке фирменного стиля компании — Azure AD — Microsoft Entra 
 Редактировать
 Твиттер  LinkedIn  Фейсбук  Электронная почта
  •  Статья
  •  
 Настройка фирменной символики вашей компании для процесса входа пользователя обеспечивает бесперебойную работу приложений, использующих Azure Active Directory (Azure AD) в качестве службы управления удостоверениями и доступом. Используйте это справочное руководство по CSS, если вы используете шаблон CSS как часть процесса настройки фирменного стиля компании.
 
 Селекторы HTML 
 Следующие стили CSS становятся стилями тела и ссылок по умолчанию для всей страницы. Применение стилей к другим ссылкам или тексту переопределяет селекторы CSS.
  •   корпус  - стили на всю страницу
  •  Стили для ссылок:
    •   а, а:ссылка  - Все ссылки
    •   a:hover  - Когда указатель мыши находится над ссылкой
    •   a: focus  - Когда ссылка имеет фокус
    •   а: фокус: наведение  - Когда ссылка имеет фокус  и , мышь находится над ссылкой
    •   a:active  - При нажатии на ссылку
 Используйте следующие селекторы CSS для настройки сведений о входе в систему.
  
  •   .ext-background-image  — Контейнер, который включает фоновое изображение в шаблон лайтбокса по умолчанию
  •   .ext-header  — Заголовок вверху контейнера
  •   .ext-header-logo  — Логотип заголовка вверху контейнера
  •   .ext-middle  — Стиль полноэкранного фона, который выравнивает окно входа по вертикали по середине и по горизонтали по центру
  •   .ext-vertical-split-main-section  — стиль для контейнера фона частичного экрана в шаблоне с вертикальным разделением, который содержит как поле входа, так и фон (этот стиль также известен как активный Шаблон службы федерации каталогов (ADFS).)
  •   .ext-vertical-split-background-image-container 
     
     — фон окна входа в шаблон вертикального разделения/ADFS
  •   .ext-sign-in-box  — Контейнер окна входа
  •   . ext-title  - Текст заголовка
  •   .ext-subtitle  - Текст субтитров
  •  Стили для основных кнопок:
    •   .ext-button.ext-primary  - стиль основной кнопки по умолчанию
    •   .ext-button.ext-primary:hover  - Когда мышь находится над кнопкой
    •   .ext-button.ext-primary:focus  - Когда кнопка имеет фокус
    •   .ext-button.ext-primary:focus:hover  - Когда кнопка имеет фокус  и , мышь находится над кнопкой
    •   .ext-button.ext-primary:active  - При нажатии кнопки
  •  Стили для дополнительных кнопок:
    •   .ext-button.ext-secondary  - Дополнительные кнопки
    •   .ext-button.ext-secondary:hover  - Когда мышь находится над кнопкой
    •   .ext-button.ext-secondary:focus  Когда кнопка имеет фокус
    •   .ext-button. ext-secondary:focus:hover  - Когда кнопка имеет фокус  и , мышь находится над кнопкой
    •   .ext-button.ext-secondary:active  - При нажатии кнопки
  •   .ext-ошибка  - Текст ошибки
  •  Стили для текстовых полей:
    •   .ext-input.ext-text-box  - Текстовые поля
    •   .ext-input.ext-text-box.ext-has-error  — при ошибке проверки, связанной с текстовым полем
    •   .ext-input.ext-text-box:hover  - Когда указатель мыши находится над текстовым полем
    •   .ext-input.ext-text-box:focus  — Когда текстовое поле имеет фокус
    •   .ext-input.ext-text-box:focus:hover  - Когда текстовое поле имеет фокус  и , мышь находится над текстовым полем
  •   .ext-boilerplate-text  — Пользовательский текст сообщения в нижней части окна входа
  •   .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *