Multiple Backgrounds On Top Of Each Other (Normal, Stretched, Normal)
Since I faced an issue with the background image beeing too short for the content at different resolutions, I tried to split the background into 3 parts and stretching the middle o
Solution 1:
You'll need to specify the background-positions and background sizes. Also note that you'll need to list your larger "middle" background last so that it doesn't cover the others.
#content {
width: 1024px;
height: 950px;
text-align: center;
padding-top: 35px;
background: url(http://i.stack.imgur.com/vNQ2g.png?s=128&g=1), url(http://i.stack.imgur.com/vNQ2g.png?s=128&g=1), url(http://i.stack.imgur.com/vNQ2g.png?s=128&g=1);
background-repeat: no-repeat;
background-position: 0% 0%, 0% 100%, 0% 50%;
background-size: 100px, 100px, cover;
}
<div id="content"></div>
Solution 2:
#content{
width: 1024px;
height: 750px;
text-align: center;
padding: 40px 0 40px 0;
background: url(img/content_background_top.png), url(img/content_background_bottom.png), url(img/content_background_middle.png);
background-repeat: no-repeat;
background-position: 0% 0%, 0% 100%, 0% 50%; /* Order: Top, Bottom, Middle */
background-size: 1024px 68px, 1024px 71px, 1024px 100%;
}
Post a Comment for "Multiple Backgrounds On Top Of Each Other (Normal, Stretched, Normal)"