Как растянуть фоновое изображение в стилях HTML и CSS? - PullRequest
Новая
       51

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

0 голосов
/ 10 сентября 2018

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

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

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

}

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

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

enter image description here enter image description here

Ответы [ 6 ]

0 голосов
/ 10 сентября 2018

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

background-repeat: no-repeat;

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

0 голосов
/ 10 сентября 2018

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

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

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

0 голосов
/ 10 сентября 2018 
background-position: center;
background-size: contain;
background-repeat: no-repeat;

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

0 голосов
/ 10 сентября 2018

CSS Подходящий объект Свойство

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

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

Все значения свойства CSS object-fit Свойство object-fit может имеют следующие значения:

  • fill - это значение по умолчанию. Размер заменяемого содержимого заполнен в поле содержимого элемента. При необходимости объект будет растянут или сплющенный, чтобы соответствовать
  • Содержит - заменяемое содержимое масштабируется для сохранения его соотношения сторон, в то же время помещаясь в поле содержимого элемента
  • cover - заменяемое содержимое имеет размер, сохраняющий соотношение сторон при заполнении всего поля содержимого элемента. Объект будет обрезается по размеру
  • нет - заменяемое содержимое не изменяется
  • Уменьшить - содержимое имеет такой размер, как если бы оно не было указано или содержалось (что привело бы к уменьшению размера конкретного объекта)

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>
0 голосов
/ 10 сентября 2018

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

0 голосов
/ 10 сентября 2018

Старайтесь не помещать фон на <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 к первому слою контента, чтобы сделать фон фоном) .

...