Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 464
  • Last Modified:

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')no-repeat;
      background-size:100%;
      border: 1px solid #bbb;*/
      
      background-image: url('images/page_bg_top.png'),
            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;
}
0
gwarcher
Asked:
gwarcher
1 Solution
 
Tom BeckCommented:
Remove the second and third background images from #page. Adjust the background-repeat to background-repeat:no-repeat.

Add the second background image to #main. Add background-size:100%

Add the third background image to the footer,  #colophon. Add background-size:100% and height:68px.

That may not be all you need to do, but it will get you close.
0
 
COBOLdinosaurCommented:
You need to manage and position in 3 dimensions and manage the stacking order of the images.

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&
0
 
gwarcherAuthor Commented:
perfect, thanks for the help.  It's always the simplest solution.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now