Чи можна мати кілька фонових зображень за допомогою CSS?

316

Чи можливо мати два фонових зображення? Наприклад, я б хотів, щоб одне зображення повторювалося вгорі (повторити-х), а інше повторювалося по всій сторінці (повторювалося), де одне на всій сторінці знаходиться поза тим, яке повторюється вгорі.

Я виявив, що можу досягти бажаного ефекту для двох фонових зображень, встановивши фон 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 або нижче, то найкращий спосіб обходити його - це отримати додаткові діви:

<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;
}

— нікф
джерело

27

Кілька фонів підтримуються останніми версіями Firefox, Chrome, Safari та Opera. Він також буде підтримуватися в IE9. en.wikipedia.org/wiki/…

— Šime Vidas

4

І якщо ви хочете мати різні настройки повторення / позиції, ви можете зробити це: css3.info/preview/multiple-backgrounds

— Krisc

2

Для IE8 - IE6 ви можете використовувати PIE.js. webdesign.tutsplus.com/tutorials/htmlcss-tutorials/…

— Алеш Котник

1

Чи дотримується розмір фону за цим самим правилом? Я хочу, щоб усі мої фони були на повний зріст, за винятком одного з них (яким я хочу бути висотою зображення).

— mtmurdock

Так, розмір фону дотримується того самого правила (як і всі інші властивості фону). Властивості тла (як правило, починаючи з префіксу background, а потім певного властивості фону) насправді можна вказати в межах самого власності фону, тому оскільки підтримуються кілька фонових зображень, також підтримуються кілька перелічених властивостей. Це стосується розміру, положення, повтору тощо.

— Cannicide

35

Найпростіший спосіб, коли я знайшов використовувати два різних фонових зображення в одному діві, це за допомогою цього рядка коду:

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

Очевидно, що це не повинно бути лише тілом веб-сайту, ви можете використовувати це для будь-якого діва, який ви хочете.

Сподіваюся, що це допомагає! У моєму блозі є публікація, яка розповідає про це трохи глибше, якщо комусь потрібні подальші вказівки чи допомога - http://blog.thelibzter.com/css-tricks-use-two-background-images-for-one- дів .

— TheLibzter
джерело

Зверніть увагу, що це працює лише з фоном, а не з фоновим зображенням

— 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;
}

простий спосіб налаштувати кожну позицію зображення з фоновою позицією: і встановити властивість повтору з фоновим повтором: для кожного зображення окремо

— 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/

— Шеннон
джерело

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

— Рінку
джерело

1

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

— Шон Джеймс
джерело