HTMLHelp Forums > Background image not working

Frumpy Jones

Jun 27 2012, 11:20 PM

Title says it all. Would welcome any help:

Here's the code:

/* CSS Style Sheet */

body {
margin: 0px;
padding: 0px;
}

#container {
width: 870px;
margin: 0 0 0 20px;
padding: 0;
background-color: #fff;
background-image:url(images/background.png)
}

Frederiek

Jun 28 2012, 03:27 AM

Can you post the URL (address) of a page that demonstrates the problem? Then we can see the markup, CSS and image.

Frumpy Jones

Jun 28 2012, 04:47 AM

Sorry. I meant to. It's at http://www.happyhappyfaces.com/sessions/spa/index.html

Frederiek

Jun 28 2012, 06:57 AM

You need to clear the floats. See http://css-tricks.com/snippets/css/clear-fix/ and http://nicolasgallagher.com/micro-clearfix-hack/ , and links from there.

Frumpy Jones

Jun 28 2012, 09:43 AM

QUOTE(Frederiek @ Jun 28 2012, 07:57 AM)

You need to clear the floats. See http://css-tricks.com/snippets/css/clear-fix/ and http://nicolasgallagher.com/micro-clearfix-hack/ , and links from there.

Okay, let's assume I have no idea what you're talking about (Cos I don't).

Seriously, I don't understand the problem I'm having for the solution you're providing. I'm a n00b. Can you dummy-down the problem and the solution you're offering so I can better obtain and retain the knowledge you're offering?

Darin McGrew

Jun 28 2012, 10:07 AM

Please see the FAQ entries Where can I learn about HTML? and Where can I learn about CSS?

pandy

Jun 28 2012, 03:04 PM

Read this, especially the first paragraph and follow the link to Meyer's site there.
http://css-discuss.incutio.com/wiki/Clearing_Space

Frumpy Jones

Jul 1 2012, 08:06 AM

QUOTE(pandy @ Jun 28 2012, 04:04 PM)

Read this, especially the first paragraph and follow the link to Meyer's site there.
http://css-discuss.incutio.com/wiki/Clearing_Space

This was helpful in understanding the issue. Thank you.

However, I am still having a problem with the soluton. Firstly, the container I placed the background image in (Container) has no float in it (All of the containers INSIDE of Container do).

So I tried a cleaner method (Clearer id added and utilized), but that did zippo to fix the issue (But could entirely be due to my not fully grasping what goes where to make this happen).

So, The files are uploaded for all to look at (www.happyhappyfaces.com/sessions/spa/index.htm),
and here's my css file as it stands now. I thank you in advance for any further help:

CODE

/* CSS Style Sheet */
/* Beatrice Spa */

body     {
        margin: 0px;
        padding: 0px;
        }

#container    {
            width: 870px;
            margin: 0 0 0 20px;
            padding: 0;
            background-color: #fff;
            background-image:url("images/background.png");
            background-repeat:no-repeat;
            background-attachment:fixed;
            }

#container #col1    {
                /*background-color:#ceccfe;*/
                margin: 10px;
                padding: 0;
                width: 218px;
                height: 95px;
                float: left;
                }

#container #col2    {
                margin: 0;
                padding: 0;
                width: 360px;
                height: 150px;
                float: left;
                }

#container #col3    {
                /*background-color:#dcdcfe;*/
                margin: 10px;
                padding: 0;
                width: 136px;
                height: 98px;
                float: right;
                }

#container h2    {
                /*background-color:#09F*/;
                margin: 0;
                padding: 0;
                width: 100%;
                height: 178px;
                float: left;
                vertical-align: middle;
                }

#container h3    {
                /*background-color:#6599ff*/;
                margin: 0;
                padding: 0;
                width: 100%;
                height: 50px;
                float: left;
                vertical-align: middle;
                }

#container h4    {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 15px;
                float: left;
                }

#container #col4    {
                    width: 250px;
                    float: left;
                    }

#container #col5    {
                    /*background-color:#ccccfe*/;
                    width: 610px;
                    float: right;
                    margin: 0;
                    padding: 0;
                    }

#container #footer {
                    /*background-color: #333365*/;
                    color: #e9ffff;
                    float: left;
                    width: 870px;
                    }

#clearer     {
                clear: left; line-height: 0; height: 0;
                }

pandy

Jul 1 2012, 01:15 PM

You've placed your clearer DIV wrong. You must have it AFTER the floats you want to clear. Where you have it, first in #container, there's nothing to clear.

Point is that when a box has the property 'clear' it goes to the first spot where no float interferes. If you place it before the floats it just stays where it is because there are no floats in the way.

If you want to visualize this to understand how it works create a document with a container, a few floated boxes and a clearer DIV. Give all but the container a height and width and give all boxes different background colors so you can see them. Then start moving things around and see what happens. When it comes to positioning, floats and the like, there is no better method than this if you want to quickly get a grasp of things IMO.

Frederiek

Jul 2 2012, 02:34 AM

That's a good exercise.
The only (slight) problem I have with a clearer DIV is the need of an extra empty element, which is not very semantic.

Personally, I use Nicolas Gallagher's Micro-clearhack, which uses CSS pseudo-elements ( see http://www.456bereastreet.com/archive/2005...lectors_part_3/ ).

pandy

Jul 2 2012, 06:35 AM

The advantage is that it works and is short and simple, both to use and understand.

I think you got the URL wrong? You meant this, right?
http://nicolasgallagher.com/micro-clearfix-hack/

pandy

Jul 2 2012, 01:36 PM

OK, this seems to be fixed now, but you don't need that many clearers. The last one is enough.

Frederiek

Jul 3 2012, 02:44 AM

QUOTE(pandy @ Jul 2 2012, 01:35 PM)

The advantage is that it works and is short and simple, both to use and understand.

I think you got the URL wrong? You meant this, right?
http://nicolasgallagher.com/micro-clearfix-hack/

I had already given that link earlier in this thread.
This time I meant to point to an explanation of CSS pseudo-elements.

pandy

Jul 3 2012, 05:18 AM

Ah!