Use before and after pseudo-elements in the background image

Question

I want to create navigation elements from three (background) images, with the first and last fixed width, and also with the central width of the variable, depending on the width of the text in the navigation element. I am convinced that using pseudo-elements before and after would be the best method. However, when I try to do this, the main (central) background image for the navigation element overlaps with the background images before and after.

You can see what I mean by this page .

Here is the CSS:

.box { background-image: url(nav/images/nav_02.png); background-repeat: repeat; height:20px; position: absolute; padding: 10px 13px; } .box:before { left: 0; background-image: url(nav/images/nav_01.png); } .box:after { right: 0; background-image: url(nav/images/nav_03.png); } .box:before, .box:after { content: ' '; width: 13px; height:40px; position: absolute; top: 0; background-repeat: no-repeat } 

And HTML:

 <div class="box">here is some text</div> 

Is it possible to use background images in this way using pseudo-elements?

Thanks,

Nick

Answer 1

Yes, but you will have to use the left and right attributes to move the pseudo-elements in the correct position. filling is not suitable for placing the main unit. Better to use stock.

 .box { background-repeat-x: repeat; background-image: url(nav/images/nav_02.png); background-repeat: repeat; height: 40px; position: absolute; margin: 0 13px; line-height: 40px; } .box:before, .box:after { content: ' '; display:block; width: 13px; height: 40px; position: absolute; top: 0; background-repeat: no-repeat; } .box:before { left: -13px; background-image: url(nav/images/nav_01.png); } .box:after { right: -13px; background-image: url(nav/images/nav_03.png); }