gwarcher
asked on
CSS3 Multiple Background images vertical
I'm new to multiple backgrounds in css3 but a peer of mine said that it might fix my problem. I have a website with a content background that is an image that I need to stack in the middle. So I have sliced an image into three different images and applied the css but I am having some repeating problems.
Here is site:
http://www.sendright.com/draft/lauren
code snippet:
#page {
/*background: url('images/page_bg.png')n o-repeat;
background-size:100%;
border: 1px solid #bbb;*/
background-image: url('images/page_bg_top.pn g'),
url('images/page_bg_middle .png'),
url('images/page_bg_bottom .png');
background-repeat: no-repeat, repeat-y, no-repeat;
background-size:100%;
border-radius: 10px;
}
Here is site:
http://www.sendright.com/draft/lauren
code snippet:
#page {
/*background: url('images/page_bg.png')n
background-size:100%;
border: 1px solid #bbb;*/
background-image: url('images/page_bg_top.pn
url('images/page_bg_middle
url('images/page_bg_bottom
background-repeat: no-repeat, repeat-y, no-repeat;
background-size:100%;
border-radius: 10px;
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
perfect, thanks for the help. It's always the simplest solution.
This page with multiple backgrounds and transitions might help
You may want to use percentages for the positioning if you are trying to keep the page responsive, though you can also script re-alignment if you want to beat yourself up.
Cd&