Как создать оверлейные масштабируемые divs

Question

Я пытаюсь создать изображение с наложением градиента изображения и текста. что-то вроде:

<div> 
<img src="url"/> 
<div background-image="other url" background-repeat:repeat-x;> 
    <h2>some text</h2> 
</div> 
</div> 

несколько нот:
* Мне нужно оба изображения, чтобы правильно масштабировать по ширине и изменения высоты.
* Высота градиента img составляет 96 пикселей и ширина 1 px.

что такое собственно css для такого наложения? я пробовал абсолютный/относительный и определял вершину в px, но при изменении размера градиента div изменил его положение и больше не выравнивался по дну. благодаря Гилад

CSS

.main{ 
    text-align:center; 
} 

.album {  
    width: 100%; 
    position: relative; 
    margin: 0 auto; 
} 

.album-cover { 
    max-width: 100%; 
    display: block; 
} 

.album-cover-gradient { 
    height: 96px; 
    background-image: url('../img/text-bg.png'); 
    background-repeat: repeat-x; 
    margin: 0 auto; 
    position: absolute; 
    bottom: 0; 

} 

Answer 1

Синтаксис вы использовали неверен (background-image="other-url" background-repeat: repeat-x;) должен быть style="background-image: url('xxx')"; background-repeat: repeat-x;.

Однако это должно быть действительно поставлено во внешнюю таблицу стилей.

попробовать что-то вроде этого:

http://jsbin.com/Odiduce/1/edit