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;
}
source to share
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>
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>
.
source to share