Help - Search - Members - Calendar
Full Version: Background image not working
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
Frumpy Jones
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
Can you post the URL (address) of a page that demonstrates the problem? Then we can see the markup, CSS and image.
Frumpy Jones
Sorry. I meant to. It's at http://www.happyhappyfaces.com/sessions/spa/index.html
Frederiek
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
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). blush.gif

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? smile.gif
Darin McGrew
Please see the FAQ entries Where can I learn about HTML? and Where can I learn about CSS?
pandy
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
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
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
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
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
OK, this seems to be fixed now, but you don't need that many clearers. The last one is enough.
Frederiek
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
Ah!
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.