Как растянуть фоновое изображение в стилях html и css?

Я новичок в html и css и пытаюсь создать личный веб-сайт в учебных целях.

У меня возникают проблемы с тем, что фоновое изображение не растягивается до размеров экрана. Предоставление кода в следующем.

body{
    background-image: url(backgroundimage.jpg);
    /*background-color: #95afc0;*/
    background-size: cover;

}

Изображение отлично работает, когда окно находится в полноэкранном режиме. Я хотел бы посмотреть, есть ли у меня способ предотвратить дублирование изображений, чтобы они соответствовали экрану, и просто обрезать или растягивать, чтобы соответствовать. Поскольку это будет проблемой на мобильном устройстве. Я пробовал другие свойства background-size.

Заранее спасибо!

enter image description hereenter image description here

попробуйте background-size:100% 100%

chintuyadavsara 10.09.2018 09:36

вы можете поделиться еще кодом?

Hariom Singh 10.09.2018 09:44

Не забудьте отметить этот вопрос как полученный, если есть ответы на него. Кроме того, проголосуйте за любые вопросы, которые вы сочли полезными. Спасибо :)

Invariant Change 01.10.2018 07:35
1
3
761
6

Ответы 6

Старайтесь не размещать фон на вашем <body>, а создайте <div id="background"></div> с #background {position: fixed; z-index: 1; background-image: url(backgroundimage.jpg); background-repeat: no-repeat; height: 100vh; width: 100vw;} (не забудьте применить z-index> 1 к вашему первому слою контента, чтобы сделать фон фоном).

Вам нужно добавить background-position: center (который относится к обеим осям X и Y); фон-повтор: без повторения;

CSS Подгонка объекта Имущество

Попробуйте следующее и посмотрите, что лучше всего соответствует вашим потребностям ...

.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}

All Values of The CSS object-fit Property The object-fit property can have the following values:

  • fill - This is default. The replaced content is sized to fill the element's content box. If necessary, the object will be stretched or squished to fit
  • contain - The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box
  • cover - The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit
  • none - The replaced content is not resized
  • scale-down - The content is sized as if none or contain were specified (would result in a smaller concrete object size)

enter image description here

H2 {
font-size:200%; color:#6a78c2; text-align:center; font-family: fantasy; 
}

.myimgs {
border:1px solid #333; background:#ff0653; padding:10px; margin-bottom:20px;
}

.myimg {
width:100%; background-position:center; background-repeat: no-repeat;
}

.fill {object-fit: fill;}
.cover {object-fit: cover;}
.contain {object-fit: contain;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
<H2>FILL</H2>

<div class="myimgs">
<img src="https://i.imgur.com/67jSBl0.jpg" alt="you" class="myimg fill" width="1049px" height="693px">
</div>

<H2>COVER</H2>

<div class="myimgs">
<img src="https://i.imgur.com/67jSBl0.jpg" alt="you" class="myimg cover" width="1049px" height="693px">
</div>

<H2>CONTAIN</H2>

<div class="myimgs">
<img src="https://i.imgur.com/67jSBl0.jpg" alt="you" class="myimg contain" width="1049px" height="693px">
</div>

<H2>SCALE-DOWN</H2>

<div class="myimgs">
<img src="https://i.imgur.com/67jSBl0.jpg" alt="you" class="myimg scale-down" width="1049px" height="693px">
</div>

<H2>NONE</H2>

<div class="myimgs">
<img src="https://i.imgur.com/67jSBl0.jpg" alt="you" class="myimg none" width="1049px" height="693px">
</div>
background-position: center;
background-size: contain;
background-repeat: no-repeat;

вам нужно добавить положение фона изображения в центр и установить повторение без повторения.

Вы можете попробовать этот код

body{
    background-image: url(backgroundimage.jpg);
    /*background-color: #95afc0;*/
    background-repeat:no-repeat;
    background-size: cover;
}

Обложка: измените размер фонового изображения, чтобы покрыть весь контейнер, даже если изображение должно растягиваться или немного срезаться с одного из краев.

Чтобы предотвратить дублирование фонового изображения, вам необходимо добавить следующее свойство и значение css:

background-repeat: no-repeat;

Для получения дополнительной информации о свойстве фона перейдите по этой ссылке: https://css-tricks.com/almanac/properties/b/background/

Другие вопросы по теме