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:

example titles

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

Popular posts from this blog

javascript - RequestAnimationFrame not working when exiting fullscreen switching space on Safari -

Python ctypes access violation with const pointer arguments -