CSS - положение нескольких фоновых изображений с плитками

Question

Я создал некоторые фрагменты и хочу их разместить в одном. Моя проблема начинается уже в строке заголовка. Красные части - «header-left.png» и «header-right.png» фиолетовая часть - это повторяющаяся плитка «header-center.png».

Что у меня уже есть:

.test { 
width: 800px; 
height: 200px; 
border: dashed 1px #006597; 
background-image: url('../images/standard/header-left.gif'), 
    url('../images/standard/header-center.gif'); 
background-repeat: no-repeat, repeat-x; 
} 

Но как я могу сказать, второй фон, чтобы начать после 50px так начинается после заголовка-left.gif? И как я могу поместить третий фон, чтобы он был выровнен вправо?

Это то, что я получаю в настоящее время:

Это моя цель: красный: заголовок левый фиолетовый: повторение заголовка-центр черный: заголовок правой зеленый: повторение фона синий: нижний колонтитул

Answer 1

Попробуйте что-то вроде этого:

HTML

<container> 
    <header> 
    <div class="red"> 
    <div class="purple"> 
    <div class="black"> 
    </header> 
    <div class="green"> 
... 

CSS

.header{ 
    width: 800px; 
} 

.red{ 
    display: inline-block; 
    width: 50px; 
} 

.purple{ 
    display: inline-block; 
    width: 650px; 
} 

.black{ 
    display: inline-block; 
    width: 100px; 
} 

И добавьте текущую информацию об источнике

Answer 2

Оберните свой заголовок внутри контейнера и разместите 3 отдельных элемента, расположенных рядом друг с другом:

#headerLeft{/*Custom Styles*/} 
#headerCenter{/*Custom Styles*/} 
#headerRight{/*Custom Styles*/} 

Имейте контейнер для тела и нижний колонтитул.

Here's a Fiddle

Вы можете поменять стили фона цвета с изображениями, и это должно быть то, что вы ищете.

Answer 3

делят заголовок в трех DIV, а затем загрузить фон для каждого заголовка дивы