Изменение размера фонового изображения в div с помощью css

Ниже css задает отдельный фон на двух div; изображения повторяются, если они не вписываются в размер div.

Как я могу растянуть изображения, используя css, чтобы поместиться в пространство, требуемое div?

<style type="text/css">   
#contentMain {  
  margin-bottom: 5%; 
  margin-top: 10%;
  margin-left: 10%;
  margin-right: 10%;
  background: url( /jQuery/mypage/img/background1.png )
}  
#page1 {    
  background: url( /jQuery/mypage/img/background2.png )  
} 
</style>

Ответ 1

Ответ

У вас есть несколько вариантов:

background-size: 100% 100%; - изображение растягивается (соотношение сторон может быть сохранено в зависимости от браузера)
background-size: contain; - изображение растягивается без резки при сохранении формата изображения
background-size: cover; - изображение полностью покрывает элемент при сохранении соотношения сторон (изображение можно отрезать)

/edit: И теперь есть еще больше: https://alligator.io/css/cropping-images-object-fit

Демо на Codepen

Обновление 2017: Предварительный просмотр

Вот скриншоты для некоторых браузеров, чтобы показать их отличия.

Chrome

Firefox

Край

IE11

Уведомление о доставке

`background-size: 100% 100%;` дает наименьший прогнозируемый результат.

Ресурсы

https://alligator.io/css/cropping-images-object-fit

Ответ 2

Я бы рекомендовал использовать это:

  background-repeat:no-repeat;
  background-image: url(your file location here);
  background-size:cover;(will only work with css3)

надеюсь, что это поможет: D

И если это не поддерживает ваши потребности, просто скажите это: Я могу создать jquery для поддержки нескольких браузеров.

Ответ 3

С background-size свойство в тех браузерах, которые поддерживают эту очень новую функцию CSS.