0

I am having troubles using css to place two background images in a div. The first images is the top of a box that is transparent and has rounded edges. The next is just 10px tall of the body of the same image without the rouded corners. I want to have the 1st image at the top and the next image right after with it repeating on the y axes untill the bottom of the page regardless of content. Can someone help me with the css. Every time i try it, the second background image covers up the first image and doesn't repeat unless there is content. thanks

John Marsh
  • 23
  • 2
  • 12

1 Answers1

0

You have to use the height property of the div to deal with this. If you dont set the properties, it will wrap the images one top of the other which is the problem you facing now.

Refer the following link you will see multiple options of how to do this.

Can I have multiple background images using CSS?

hope this helps..

Community
  • 1
  • 1
pibcat
  • 94
  • 2
  • 9
  • Ok when i added the first image with the following css code everything was looking good but when i added the second image both images are not showing? `.content{ height:100%; width:822px; margin-left:auto; margin-right:auto; background-image:url(../images/body/main_top.png), url(../images/body/main.png); background-repeat:no-repeat, repeat-y; }` Any ideas? – John Marsh Oct 31 '12 at 17:26
  • try this- one main div with page width and height-inside this main div do 2 child divs A,B. A for the rounded corners B for body. set the fixed height for A and leave the B height as Auto. – pibcat Oct 31 '12 at 17:39
  • like following:
    .. something like that..assuming ur images width is 822px as well..set the background image for div A as corners one and set the other image as back ground image for B....one way of doing it..hope this the answer u looking for..     – pibcat Oct 31 '12 at 18:12