Why won't these CSS background images display?

Question

I'm having a problem with getting the left and right border images at the top of this page to display:

http://www.designated.net.au/testbed/theme/

As you can see I've set a height of 50px for the left border image to show you how I want it to look. But I need them both to work at 100% height.

There also seems to be an issue with the sides displaying when there is any text in the main division.

Any help will be appreciated!

EDIT:

Fixed version: http://www.designated.net.au/testbed/themefixed/

Related: [How to make a float div 100% height of its parent](http://stackoverflow.com/questions/3049783/how-to-make-a-floated-div-100-height-of-its-parent). — Roddy of the Frozen Peas, Aug 15 '12 at 13:02

score 0 · Answer 1 · answered Aug 15 '12 at 13:03

Your #theme-page element has no height, so every div inside it that you set the height to 100%, won't know what to do, because 100% means: "100% of the element that contains me" If you set a height of 100% to your borders, and a fixed or percentage height to the main div (#theme-age), the borders will appear, because their containers will have a height as well.

score 0 · Accepted Answer · answered Aug 15 '12 at 13:11

0

It's easier and optimized to replace your left and right images by a border.

#theme-header-top {
  position: relative;
  background-color: white;
  border: 10px solid rgb(51, 51, 51);
  border-width: 0 10px;
}

You have to remove the width:100% to make it work properly. In fact it's useless since your element is a block.

answered Aug 15 '12 at 13:11

LeBen

1,884
12
21

Oh wow, that did it. Thank you so much! I don't understand what you mean by the block part though. – dais Aug 15 '12 at 13:42

score 0 · Answer 3 · answered Aug 15 '12 at 13:32

First, You have some pixels gap between the top area to the bottom.
This is common in css when you have only visual content in side the div.
It happens because you need to give a font-size:0; to the div, otherwise it has some extra height you can't overcome with normal height:value.

#theme-header-top {
   background-color: #FFFFFF;
   position: relative;
   width: 100%;
   font-size: 0;
}

The images themselves (for theme-header-bottom-left) ) are 35X35 so I don't know what you mean when you want the to be 100% height.
I can only guess that you referred to the gap between the bottom area and the top area.

Thanks, but I'm not sure how this is relevant. – dais Aug 15 '12 at 13:43 — dais, Aug 15 '12 at 13:43

Why won't these CSS background images display?

3 Answers3