Prevent transparent background from overlapping with opaque background

I have div

and I want to give it 3 backgrounds. The background image on the left and right is transparent, but since my center background image repeat-x

, the center background goes under the left and right backgrounds, is there a way to stop this event?

div {
    background: url('images/left_nav_bg.png'), 

    background-repeat: no-repeat,no-repeat,repeat-x;
    background-position: left,right;



source to share

1 answer

To display only the center background between certain points, you would have to give it a start and stop offset, and at the moment you can only set one of the two. I'm afraid you'll have to work with a pseudo-element for the center image:

div {
    background: url(,
    background-repeat: no-repeat;
    background-position: left, right;
    height: 300px;
    position: relative;
    width: 300px;

div:before {
    background: url( top left repeat-x;
    content: ' ';
    display: block;
    height: 100%;
    left: 45px;
    position: absolute;
    right: 37px;
    z-index: -1

<div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </div>

Run codeHide result


and right

position the center background so that it doesn't overlap the other two.

position: absolute

and z-index: -1

make sure the center image doesn't overlap the content in <div>




All Articles