Как в html сделать фон на весь экран: Как растянуть фон на всю ширину окна?

css — Как сделать задний фон на весь экран html

Задать вопрос

Вопрос задан 11 месяцев назад

Изменён 11 месяцев назад

Просмотрен 149 раз

У меня все обернуто в контейнер, у которого определенная ширина. Но есть блок, который занимает всю ширину экрана. Я новичок и не особо понимаю как так сделать. Я пытаюсь сделать еще адаптив, если это как-то повлияет. Вот ccs контейнера

.container {
    max-width: 944px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding: 0px 10px;
}

• html
• css

.container для контента основного должен быть одинаковый
.container для header должен быть просто побольше

*, *::before, *::after {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-size: 30px;
  font-family: sans-serif;
}
. container {
  max-width: 600px;
  padding: 0 15px;
  margin: 0 auto;
  width: 100%;
  display: block;
}
.container_header {
  max-width: 800px;
}
.header {
  padding: 30px 0;
  background-color: orange;
}
.section {
  background-color: grey;
  padding: 80px 0;
}
.section__wrapper,
.header__wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.block {
  padding: 20px;
  background-color: white;
}

<header>
  <div>
    <div>
      <div>Header</div>
    </div>
  </div>
</header>
<section>
  <div>
    <div>
      <div>Content</div>
      <div>Content</div>
      <div>Content</div>
    </div>
  </div>
</section>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как растянуть картинку в html

2022-07-21

Изображения – важная часть привлекательного дизайна сайта. Фоновые изображения могут прибавить визуального интереса странице. Background image HTML поможет получить тот визуальный дизайн, который вы ищете.

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

Лучший способ растянуть изображение — это использовать свойство CSS3 «background-size». Вот пример, который использует фоновое изображение для body страницы, и устанавливает размер в «100%». Поэтому рисунок всегда растянется и заполнит весь экран.

body {
  background: url(bgimage.jpg) no-repeat;
  background-size: 100%;
}

Это свойство работает в IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ и во всех популярных мобильных браузерах.

Имитация растянутого фона в устаревших браузерах

Маловероятно, что понадобится обеспечивать поддержку HTML body background image браузерам старше IE9. Но предположим, что вас беспокоит, будет ли сайт корректно отображаться в IE8. В этом случае нужно имитировать растянутый фон. Можно использовать префиксы браузеров для Firefox 3.6 (-moz-background-size) и Opera 10.0 (-o-background-size).

Самый легкий способ имитировать растянутое фоновое изображение — это растянуть его по всей странице. Тогда не останется лишнего пространства, и не нужно будет волноваться, что текст не поместится в растянутую область. Вот как можно HTML background image растянуть:

Добавьте изображение для фона как первый элемент веб-страницы, и назначьте ему id равное «bg»:

id="bg" />

Расположите фоновое изображение так, чтобы оно было зафиксировано сверху и слева, было 100% в ширину и 100% в высоту.
Добавьте приведенный ниже код в таблицу стилей:

img#bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;}

Поместите все содержимое страницы внутрь элемента DIV с id «content». Добавьте DIV под изображением:

All your content here - including headers, paragraphs, etc. 

Примечание: сейчас пришло время взглянуть на страницу. Изображение должно выглядеть растянутым, но содержимое пропало. Почему? Фоновое изображение 100% в высоту, а раздел содержимого располагается в потоке документа после изображения – большинство браузеров не отобразят его.

Задайте содержимому относительное позиционирование и задайте z-index, равный 1. Это поднимет его над фоновым изображением в браузерах. Добавьте приведенный ниже код в таблицу стилей:

#content {
  position: relative;
  z-index: 1;}

5. Свойство HTML CSS background image в Internet Explorer 6 несовместимо с современными стандартами. Есть много способов спрятать CSS от любого браузера, кроме IE6, но самое это использовать условные комментарии.
6. Обязательно проверьте это в IE 7 и IE 8. Возможно, понадобится откорректировать комментарии.

Немногим сайтам необходимо поддерживать IE 7 или 8, а IE6 – еще меньше! Как таковой, этот подход устарел. Я оставляю это как любопытный пример того, насколько было трудно до того, как все браузеры стали работать сообща!

Имитация растянутого фонового изображения на меньшем пространстве

Можно применить похожую технику, чтобы имитировать растянутое фоновое изображение на HTML div background image или другом элементе веб-страницы. Это сложнее, так как нужно либо использовать абсолютное позиционирование.

1. Разместите на странице изображение, которое будет использовано как фон.
2. В таблице стилей установите ширину и высоту изображения. Заметьте, что можно подставить проценты, но мне легче использовать значения длины.

img#bg {
  width: 20em;
  height: 30em;}

3. Поместите содержимое в div с id «content», как мы делали раньше.
4. Задайте div с содержимым ширину и высоту, соответствующую размерам фонового изображения:

div#content {
  width: 20em;
  height: 30em;}

После этого разместите содержимое на той же высоте, что и фоновое изображение. Не забудьте добавить для содержимого z-index, равный 1.

#content {
  position: relative;
  top: -30em;
  z-index: 1;
  width: 20em;
  height: 30em;}

Свойства background-size и background image HTML широко поддерживаются браузерами, и этот подход, скорее всего, можно расценивать как продукт прошедшей эпохи. Если вы захотите использовать такой подход, обязательно проверьте его в как можно большем количестве браузеров. И если содержимое поменяет размер, нужно будет изменить размеры контейнера и фонового изображения.

КККонстантин Кондрусинавтор статьи «How to Stretch a Background Image to Fit a Web Page»

Как сделать фоновое изображение полноэкранным с помощью html+css

Я работаю с файлом html+css и хочу создать полноэкранное фоновое изображение в HTML и CSS Я установил все свойства фонового изображения . Я хочу, чтобы это фоновое изображение заполняло весь экран на устройствах и не прокручивало фоновое изображение, поэтому я пытаюсь сделать это:

 * {
            маржа: 0;
            заполнение: 0;
        }
        
        .изображение на заднем плане {
            положение: родственник;
        }
        
        картинка {
            размер фона: обложка;
            фоновая позиция: центр;
            фоновый повтор: без повтора;
            background-attachment: исправлено;
            положение: фиксированное;
            высота: 100%;
            ширина: 100%;
        }
     

 <дел>
     
    

 * {
  маржа: 0;
  заполнение: 0;
}
заголовок {
  ширина: 100%;
  высота: 100вх;
  background: url("adult-blur. jpg") по центру по центру без повторов;
  размер фона: обложка;
  переполнение: скрыто;
  объект подходит: обложка;
  положение объекта: снизу вверх;
}
 

 
    <голова>
         5.0/css/bootstrap.min.css">  <стиль>
            #тело-контейнер {
                ширина: 100%;
                высота: 100вх;
                background: url("j.jpg") center center no-repeat;
                размер фона: обложка;
                переполнение-у: прокрутка;
            }
        
    
    <тело>
        <дел>