Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

background-image

Status
Not open for further replies.
ethorn10

ethorn10

Programmer
Feb 18, 2003
406
US
Ok. I'm still new at this so be patient. I have a simple page at the moment. It has 7 divs:

container
header
top
inner
topleft
topright
footer

Code: 
<body>
<div id="container">
<div id="header" align="center"><img src="images/img1.gif" /></div>
<div id="top">
    <div id="inner">
 
    <div id="topleft">
    </div>
        <div id="topright">
    </div>

    </div>
</div>
<div id="footer"><img src="images/img2.gif" /></div>
</div>
</body>

css:
Code: 
#container {
    width: 775px;
    margin-left:auto;
    margin-right:auto;
}


#inner{margin:0; width:100%; } /* The ie/pc pecularity */ 


/* HEADER */

#header {
  background-color: transparent;
  margin: 0;
}

#footer {
  background-color: white;
  color: black;
  font-size: 9px;
  margin: 0;
  text-align: center;
  clear: both;
  position: relative;
}

#top 
{
    position: relative;
    height: 300px;
    min-height: 100%;
    border-left: 187px solid #4C86C5;
    border-right: 199px solid #4C86C5;
}

#topleft 
{
    float: left;
    width: 187px;
    margin-left: -187px;
    margin-right: 1px;
    background-color: #4C86C5;
    position: relative;
    background-image: url(imgleft.gif);
}

#topright 
{
    float: right;
    width: 199px;
    margin-left: 1px;
    margin-right: -199px;
    background-color: #4C86C5;
    position: relative;
    background-image: url(imgright.gif);
}

Everything lines up fine and looks ok except the background-image for both topright and topleft do not show through. It's like something is being painted over top of it but I don't see how or where. Any help is appreciated...be gentle.

Thanks.
 
Sort by date Sort by votes
It is like something is painted over them or as if they are not loaded at all. You expect your background images to be in the same folder as the css file -- and your images seem to be in the images folder. Is it possible that the images are not loaded because they're not found?

Other than that, your divs might be out of view, since their margins are as big as their widths. I suggest you experiment with borders on these (#topright, #topleft) divs, to make sure they're rendered where you want them to be.

Lastly, is it all the browsers that are exhibiting this problem?
 
Upvote 0 Downvote
May be base problem? uri("image/imgright.gif") or what else?..
 
Upvote 0 Downvote
ok...

the divs are painted fine when they don't have a background-image set. when they are just a color, they show up fine.

also, i'll try putting images/ before the image but i wasn't sure if it needed that. the css file is in the same folder as the images, which made me think to just leave it the way it is.
 
Upvote 0 Downvote
And to answer the question that I missed the first time around, yes the two browsers I tested (IE and FF) show up the same.

It looks like maybe the "height" part of the #top is messing with this? Do I have to specify a height of the div in order for the entire image to be seen? Shouldn't the div just expand to fit the image? I'm new...sorry...
 
Upvote 0 Downvote
Shouldn't the div just expand to fit the image?
Click to expand...
No. Put some content in the div and it will expand to hold the content. The background is NOT content.
e.g.
Code: 
div id="topright">
<p>This is a test</p>
<p>This is a test</p>
<p>This is a test</p>
<p>This is a test</p>
    </div>

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
I'll give that a try.

Is there any way to "cheat" it and force it to the height of the background image? ...without the content laid over it.

Thanks for the example. I'll let you know what comes of it.
 
Upvote 0 Downvote
Yes, there is a way. Give it a height identical to the height of the background image. That's what you should do.
 
Upvote 0 Downvote
Ok...thanks guys. I'll give these both a try when I get back to it.

Vragabond -- should I do some sort of repeat on the background-image to make sure that the text in the middle of the site doesn't expand beyond the height of the image? Maybe the background-attachment or something?
 
Upvote 0 Downvote
an update:

Adding the height to #topleft and #topright made the background images finally show up as vragabond suggested. So then I tested how it looked with tons of text in the middle...it bombed in FF and worked in IE.

By "bombed", I mean that the div stopped when it hit the height that was set instead of painting all the way down until the footer. IE painted it all the way down, no matter how much text in the middle column.

Ideas?
 
Upvote 0 Downvote
ethorn10 said:
By "bombed", I mean that the div stopped when it hit the height that was set instead of painting all the way down until the footer.
Click to expand...
You gave your box a fixed height, why would you expect it to expand. If you give it a fixed width, do you usually expect the element not to honour that width? It is hard to help you if you don't tell us what you want to do. Here's a little run-down:

1. If you want to have a lot of content in the divs, then just put in some content. If you have no content just yet, then put in some []Lorem ipsum...[/url]
2. If you won't have any content in the divs, use just the height.
3. If you might have content or not, then you will need to tailor the solution for IE. You would use [tt]min-height[/tt] equal to the height of your background image (or equal to however tall you want the element to be without content) to make it work the way you want to in all modern browsers. IE does not understand min-height and treats [tt]height[/tt] as such. So in an IE-only declaration you would use height and give it the same value as min-height for other browsers.

Now just decide which route you need to take.
 
Upvote 0 Downvote
Ok. I would want to use number 3. I'll give it a try.

Thanks.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
718
3esolar
3
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
228
jjgupta915
jjgupta915
jason.lex
  • Locked
  • Question
crop image to fit in a div box?
Replies
2
Views
184
jason.lex
jason.lex
garcosta
  • Locked
  • Question
CSS Coding for Gradient Color Background for all Platforms
Replies
3
Views
137
1DMF
1DMF

Part and Inventory Search

Sponsor

Back
Top