3 replies [Last post]
bonzaiboy
Offline
newbie
Last seen: 13 years 45 weeks ago
Joined: 2006-12-12
Posts: 2
Points: 0

Hi guys,

I'm hoping someone can shed some light on a problem I am experiencing...

I've got a rounded corner box that sits over the top of a body background image (the rounded corner box is made up of three divs with different backgrounds - top, tiled middle and bottom).

I've cut the problem out of the main page and created this sub-page so you can see what I'm talking about:

Rounded Box Test Page

In previous implementations of these boxes, I've been able to set the background colour of the top and bottom divs to white so that it hides the continuation of the tiled lines, but as I've got a background image on the body I can't do that in this instance...

Question is - is there an easy way of stopping the containing div from tiling it's background image to the full height of the top and bottom divs?

(That question sounded much easier to understand in my head!) Smile

Thanks in advance!

Steve

[edit: I've tested this in IE6 and Firefox 1.0.4 and the behaviour is identical]

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quickest solution off the

Quickest solution off the top of my head is:

.sma_box .box_top { 
  position:relative;
  top:-10px;
  background:url("http://www.bonkersaboutbabies.co.uk/test/images/204_top.gif")no-repeat;
  }
.sma_box .box_bot {
  position:relative;
  bottom:-14px; 
  background: url("http://www.bonkersaboutbabies.co.uk/test/images/204_bottom.gif")no-repeat;
  }

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

bonzaiboy
Offline
newbie
Last seen: 13 years 45 weeks ago
Joined: 2006-12-12
Posts: 2
Points: 0

Nice One...

Cheers Hugo - works like a charm!

Steve

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

No probs, of course working

No probs, of course working that solution does mean that effectively there are areas top and bottom which are unusable as they are the original positions the top/bottom divs occupied before being shifted or offset, so you have a forced top and bottom padding.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me