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'), 
                url('images/right_nav_bg.png'),
                url('images/center_nav_bg.png');

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

      

+3


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(http://placekitten.com/45/300),
                url(http://placekitten.com/37/300);
    background-repeat: no-repeat;
    background-position: left, right;
    
    height: 300px;
    position: relative;
    width: 300px;
}

div:before {
    background: url(http://placekitten.com/17/300) 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




left

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>

.

0


source







All Articles