css - Display a fluid width title area with underlying background images -
i'm working on page i'm looking create fluid width title area underlying images. title can of variable length, whole area needs expand or contract appropriately title longer or shorter.
here's example:
i have sneaking suspicion answer have z-index property, haven't worked date, wrong. i'd images not overlap in event of short title, min-width may necessary.
can provide example?
this fiddle has rought example of want: http://jsfiddle.net/4fjcl/
<span class="left-image"></span> <span class="text"></span> <span class="right-image"></span>
left , right image should used store images. after need guarantee text rendered on top pulling images under negative margins. position: relative
on .text
guarantee shows on others.
.left-image, .right-image { display:inline-block; background: purple; width: 30px; height: 20px; } .text { position: relative; } .left-image { margin-right: -20px; } .right-image { margin-left: -20px; }
Comments
Post a Comment