Создание двухслойного фонового изображения в CSS

Question

У меня возникли проблемы с обволакиванием головы.

Я хотел бы иметь сплошной красный бар (шириной около 200 пикселей), который работает по всей длине страницы. Я уже использовал небольшое изображение 200x1px, повторенное на Y.

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

Я не уверен, как это сделать, создавая это «Второе» обоев.

Надеюсь, это имеет смысл. Благодарю.

Answer 1

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

#background{ 
    background-image: url(image1.jpg), url(image2.jpg); 

} 

Вы можете узнать больше here.

Answer 2

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

Дополнительную информацию см. На сайте example at developer.mozilla.org.

Демонстрация ниже:

body { 
 
    
 
    background-image: url('http://lorempixel.com/100/100/abstract/3/'), 
 
         url('http://lorempixel.com/200/1/abstract/2/'); 
 
    
 
    background-repeat: no-repeat, 
 
         repeat-y; 
 
    
 
    background-position: 50px 20px, 
 
         top left; 
 
    
 
}

Обратите внимание на browser compatibility использования нескольких фонов.