Как сделать два фоновых изображения. Один верхний баннер, а второй текстурированный фон?

Я начинаю работать над сайтом. Я хотел бы иметь два фоновых изображения. Одним из них может быть изображение баннера вверху, похожее на серую полосу в верхней части веб-сайта переполнения стека. Тогда другое изображение — это изображение, которое мне нужно было бы создать текстурированным фоном. Это было бы похоже на белое пространство на этом веб-сайте, но вместо цвета это было бы повторяющееся изображение. Веб-сайты с тем видом, который я ищу, это pinterest.com, thinpatterns.com, Facebook.com и т. д.

Я пробовал много разных вещей. Я попытался поместить фон в тег html в css. Это не сработало. Я также попытался поместить два разных фоновых изображения в тег body. Это не сработало, потому что он просто показал бы первый. Я также попытался создать фон в своем собственном классе. Но когда я это сделал, он вообще не появлялся. Может быть, я что-то упустил из html?

В настоящее время у меня есть следующий код:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
background-image:url(../images/absurdidad.png);
background-repeat:repeat;
}

Это создало основное фоновое изображение, которое занимает весь экран, как я и хотел. Знайте, если бы я мог добавить второй только вверху, чтобы повторять только горизонтально, тогда это было бы здорово!

Заранее спасибо за помощь.


image css background banner
person user1493824    schedule 02.07.2012    source источник
comment
возможный дубликат Могу ли я использовать несколько фоновых изображений с помощью CSS?   -  person Donal Fellows    schedule 01.12.2012

Ответы (5)


arrow_upward
5
arrow_downward

используя запятые, вы можете иметь несколько фонов в одном и том же элементе:

background-image: url('first'), url('second');

и то же правило применяется для других стилей:

background-position: top, bottom;

И так далее.

Дополнительная информация на css3.info

Если вам нужна широкая поддержка браузеров, единственный способ сделать это — использовать несколько DIV:

<div class="one">
  <div class="two">
  </div>
</div>

Удачи!

person Edouard Reinach    schedule 02.07.2012
comment
Я никогда не знал, что вы можете сделать фоновое положение: сверху, снизу; это здорово знать. Большое спасибо за помощь! - person user1493824; 03.07.2012

arrow_upward
2
arrow_downward

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

<div style="background-image:url(../images/image1.png);">
    <div style="background-image:url(../images/image2.png);">
        <!-- div content -->
    </div>
</div>
person King Skippus    schedule 02.07.2012
comment
Я поместил его в тег div, и это не сработало, но это потому, что я упустил тот факт, что это должен быть тег-оболочка со стилем. Это круто! Большое спасибо! - person user1493824; 03.07.2012
comment
Ну, на самом деле это не обязательно, моя основная идея заключалась в том, чтобы поместить внешний и внутренний элементы div, каждый с изображениями. Я использовал здесь тег стиля для жесткого кодирования изображений, но вы также можете использовать классы CSS или идентификаторы, что на самом деле является лучшей практикой, если вы будете вставлять много изображений в свой код. - person King Skippus; 04.07.2012

arrow_upward
2
arrow_downward

Вот jsFiddle, который я только что сделал: баннер jsFiddle и повторяющийся фон

CSS:

body{
    background-image:url("http://silviahartmann.com/background-tile-art/images/grunge-background-seamless-repeating.jpg");
    background-repeat: repeat;
    color: white;
}

#headerBackground{
   position: fixed;
   width: 100%;
   height: 50px;
   background-color: gray;
}

#headerContent {
    background-image: url(http://lorempixel.com/700/50/city/5);
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    text-align: center;
}

HTML:

<div id="headerBackground">
    <div id="headerContent">Other Header Content</div>
</div>

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

person arttronics    schedule 02.07.2012
comment
Ты гений!!! Спасибо! Спасибо! Это сработало отлично! Единственное, что я изменил, это повторение фона #headerContent на повторение-x. Это было прекрасно! Я не смог бы сделать это сам! :) - person user1493824; 03.07.2012
comment
Спасибо. Пожалуйста, завершите процесс Stackoverflow, приняв этот ответ, поскольку он разрешает ваш вопрос. Как только вы наберете 15 очков повторения, вы также можете выполнить Upvote (этот ответ полезен), если это тоже применимо. - person arttronics; 03.07.2012

arrow_upward
1
arrow_downward

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

Вы можете использовать CSS3 для обслуживания нескольких фонов или некоторых трюков с тегами, чтобы заставить его работать.

person leopic    schedule 02.07.2012

arrow_upward
1
arrow_downward

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

background:url(image1.jpg),url(image2.jpg);
background-size:80px 60px;
-moz-background-size:80px 60px; /* Firefox 3.6 */
background-repeat:no-repeat,repeat;
background-position:top left,center center;
person Prashobh    schedule 02.07.2012