Looking to design an image with an overlay gradient and text, similar to this:
<div>
<img src="url"/>
<div background-image="other url" background-repeat:repeat-x;>
<h2>some text</h2>
</div>
</div>
Some important points:
* Both images should scale correctly in width and height.
* The gradient image is 96px in height and 1px in width.
What would be the appropriate CSS for this kind of overlay? I've tried absolute/relative positioning and setting the top in pixels, but when resizing, the position of the gradient div changes and it no longer aligns to the bottom.
Thank you, Gilad.
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;
}