• Locked
4 replies [Last post]
Mon, 2010-08-16 02:33
aleisha
aleisha's picture
User offline. Last seen 1 year 39 weeks ago. Offline
newbie
Timezone: GMT+10
Joined: 2010-08-16
Posts: 5
Points: 6

I am having some trouble with a background image that is in a nested DIV. I did see the solved thread about a similar problem, but it didnt sort out my issue (I tried what was recommended).

Basically I have a main container div, then another div nested inside it, in which I want to place a background image and I cannot get the page/div height to show up properly (it seems to default to the screen height) and only shows the top of the image, the rest gets cut off. I only want this image on only one page, which is why I created the inner nested div. The image is supposed to come under the text, which is why I have positioned it thus:

CSS

div#main {
width: 75em;
padding-left: 0.8em;
top:-20px;
padding-top: 1.5em;
padding-bottom: 1.5em;
margin-left:auto;
margin-right:auto;
min-height: 100%;
}
div#inner{
font-family:Arial, Helvetica, sans-serif;
padding: 50px 50px 15px 50px;
background: url(../images/home-background.gif) no-repeat center 100px;
min-height: 100%;
width: inherit;
position:relative;
}
 
* html div#inner, div#main {
height: 100%;	
}

HTML

<div id="main">
<div id="inner" align="center">
  <h3><span>Main Heading</span></h3>
  <h1><span>Explanation subtext goes here</span></h1>
</div>
</div>

I just cant work out what the issue can be. Any help would be greatly appreciated. Thanks!

Top
Tags:
Mon, 2010-08-16 02:44
#1
aleisha
aleisha's picture
User offline. Last seen 1 year 39 weeks ago. Offline
newbie
Timezone: GMT+10
Joined: 2010-08-16
Posts: 5
Points: 6

Dammit!

I just looked in the "How To" part of this forum and the answer was right there!!!

html,body{ height: 100%; margin: 0; padding: 0; }

Damn!! I knew it was something really simple I missed!!

If there is anything else I have missed, just let me know. Thanks Smile

Top
Mon, 2010-08-16 02:49
#2
aleisha
aleisha's picture
User offline. Last seen 1 year 39 weeks ago. Offline
newbie
Timezone: GMT+10
Joined: 2010-08-16
Posts: 5
Points: 6

Umm

I think I spoke too soon.

While the code above does give the page enough space vertically for the image to display, it is too high.

Does anyone know what I need to do to make the inner container just contain the image - it is 300px high.

Thanks

Top
Mon, 2010-08-16 03:21
#3
aleisha
aleisha's picture
User offline. Last seen 1 year 39 weeks ago. Offline
newbie
Timezone: GMT+10
Joined: 2010-08-16
Posts: 5
Points: 6

Now it's sort of good

It now shows the image, but the page content is too long - is there any way of making it just fit the image height? Here is the new CSS code (HTML is same as above):

body,
html {
margin:0;
padding:0;
color:#000;
font-size:0.9em;
font-family: Arial, Helvetica, sans-serif;
height: 100%;
}
 
div#main {
width: 75em;
padding-left: 0.8em;
top:-20px;
padding-top: 1.5em;
padding-bottom: 1.5em;
margin-left:auto;
margin-right:auto;
height: auto; 
min-height: 100%;
 
}
div#inner{
font-family:Arial, Helvetica, sans-serif;
padding: 50px 50px 15px 50px;
background: url(../images/home-background.gif) no-repeat center 120px;
min-height: 500px;
width: inherit;
position:relative;
height: auto; 
min-height: 100%;
}
* html div#inner, div#main, div#inners {
height: 100%;
}

And if I make the divs inner and main positioned relative (as they should be), it makes the text (h1 and h3) go up too high in FF, but they display properly in IE7. I am not sure what I have to do to make it work properly - I always thought FF was browser compliant and IE no as much.... Any help would be appreciated. Thanks.

Top
Mon, 2010-08-16 12:40
#4
aleisha
aleisha's picture
User offline. Last seen 1 year 39 weeks ago. Offline
newbie
Timezone: GMT+10
Joined: 2010-08-16
Posts: 5
Points: 6

worked it out

Solution was to make the inner div a specific height!

Top
  • Locked