Могу ли я иметь несколько фоновых изображений с помощью CSS?

316

Возможно ли иметь два фоновых изображения? Например, я хотел бы, чтобы одно изображение повторялось сверху (repeat-x), а другое повторялось по всей странице (repeat), где одно изображение на всей странице находится позади того, которое повторяется сверху.

Я обнаружил, что могу добиться желаемого эффекта для двух фоновых изображений, установив фон html и body:

html {
    background: url(images/bg.png);
}

body {
    background: url(images/bgtop.png) repeat-x;
}

Это "хороший" CSS? Есть ли лучший метод? А что, если я хотел три или более фоновых изображения?

css background-image Радд Зволински
источник

Ответы:

377

CSS3 допускает такие вещи, и это выглядит так:

body {
    background-image: url(images/bgtop.png), url(images/bg.png);
    background-repeat: repeat-x, repeat;
}

Текущие версии всех основных браузеров теперь поддерживают его , однако, если вам нужна поддержка IE8 или ниже, тогда лучший способ обойти это - иметь дополнительные div:

<body>
    <div id="bgTopDiv">
        content here
    </div>
</body>
body{
    background-image: url(images/bg.png);
}
#bgTopDiv{
    background-image: url(images/bgTop.png);
    background-repeat: repeat-x;
}
nickf
источник
27
Несколько фонов поддерживаются последними версиями Firefox, Chrome, Safari и Opera. Это будет поддерживаться и в IE9. en.wikipedia.org/wiki/…
Шиме Видас
4
И если вы хотите иметь различные настройки повтора / положения, вы можете сделать это: css3.info/preview/multiple-backgrounds
Krisc
2
Для IE8 - IE6, вы можете использовать PIE.js. webdesign.tutsplus.com/tutorials/htmlcss-tutorials/…
Алеш Котник
1
Соответствует ли размер фона этому правилу? Я хочу, чтобы все мои фоновые изображения были в полный рост, кроме одного из них (которым я хочу быть высота изображения).
mtmurdock
Да, background-size следует тому же правилу (как и все другие свойства фона). Свойства фона (обычно начинающиеся с префикса background-, а затем с определенного свойства фона) могут фактически указываться в самом свойстве background, поэтому, поскольку поддерживается несколько фоновых изображений, также поддерживаются несколько перечисленных свойств. Это относится к размеру, положению, повторению и т. Д.
Cannicide
35

Я нашел самый простой способ использовать два разных фоновых изображения в одном элементе div с помощью этой строки кода:

body {
    background:url(image1.png) repeat-x, url(image2.png) repeat;
}

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

Надеюсь, это поможет! В моем блоге есть пост, в котором об этом немного подробнее говорится, если кому-то нужны дальнейшие инструкции или помощь - http://blog.thelibzter.com/css-tricks-use-two-background-images-for-one- DIV .

TheLibzter
источник
Обратите внимание, что это работает только с фоном, а не с background-image
yoel halb
24

использовать это 

body {
background: url(images/image-1.png), url(images/image-2.png),url(images/image-3.png);
background-repeat: no-repeat, repeat-x, repeat-y;
background-position:10px 20px , 20px 30px ,15px 25px;
}

простой способ настроить каждую позицию изображения с background-position: и установить свойство повтора с background-repeat: для каждого изображения индивидуально

code.rider
источник
13

Текущая версия FF и IE и некоторые другие браузеры поддерживают несколько фоновых изображений в одной декларации CSS2. Посмотрите здесь http://dense13.com/blog/2008/08/31/multiple-background-images-with-css2/ и здесь http://www.quirksmode.org/css/multiple_backgrounds.html и здесь http: / /nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

Для IE вы можете рассмотреть возможность добавления поведения. Смотрите здесь: http://css3pie.com/

Shannon
источник
4

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

Вот статья, демонстрирующая, как сделать эффект можно найти на витамине . Сходную концепцию обертывания этих слоев «луковой кожи» можно найти в A List Apart .

Майк Б
источник
4

Если вы хотите использовать несколько фоновых изображений, но не хотите, чтобы они перекрывались, вы можете использовать этот CSS:

body {
  font-size: 13px;
  font-family:Century Gothic, Helvetica, sans-serif;
  color: #333;
  text-align: center;
  margin:0px;
  padding: 25px;
}

#topshadow {
  height: 62px
  width:1030px;
  margin: -62px
  background-image: url(images/top-shadow.png);
}

#pageborders {
width:1030px;
min-height:100%;
margin:auto;        
    background:url(images/mid-shadow.png);
}

#bottomshadow {
    margin:0px;
height:66px;
width:1030px;
background:url(images/bottom-shadow.png);
}

#page {
  text-align: left;
  margin:62px, 0px, 20px;
  background-color: white;
  margin:auto;
  padding:0px;
  width:1000px;
}

с этой структурой HTML:

<body 

<?php body_class(); ?>>

  <div id="topshadow">
  </div>

  <div id="pageborders">

    <div id="page">
    </div>
  </div>
</body>
Рахиль
источник
2 

#example1 {
    background: url(http://www.w3schools.com/css/img_flwr.gif) left top no-repeat, url(http://www.w3schools.com/css/img_flwr.gif) right bottom no-repeat, url(http://www.w3schools.com/css/paper.gif) left top repeat;
    padding: 15px;
    background-size: 150px, 130px, auto;
background-position: 50px 30px, 430px 30px, 130px 130px;
}
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>
Развернуть фрагмент

Мы можем легко добавить несколько изображений с помощью CSS3. мы можем прочитать подробно здесь http://www.w3schools.com/css/css3_backgrounds.asp

Rinku
источник
1

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

Шон Джеймс
источник