Grow your CSS skills. Land your dream job.

background image not in div..

  • # January 17, 2013 at 2:39 am

    Background image of my div

    #bottom{
    background:url(head.gif);
    color: #000000;
    margin-top:10px;
    width:100%;
    }
    is not inside the div..
    here is the link
    http://ideacreativeindia.com/1

    when i apply height to this div
    background is show near that “WHO ARE WE? ” part

    :Help:

    # January 17, 2013 at 6:42 am

    I suspect this is because that div either contains divs with no assigned height or are all floated and so it is collapsing.

    How is it supposed to look?

    # January 17, 2013 at 9:45 am

    Its looking exact what i need, except footer.
    I wand footer background to be #ffffff

    but it won’t work :(
    when I apply height to footer then its background appears on top -_-

    # January 17, 2013 at 9:51 am

    How about an overflow:hidden; on the #footer div

    # January 17, 2013 at 10:08 am

    Thanks jozsef it worked :D
    Thanks a ton man.
    I was messing with this code since yesterday :D

    # January 17, 2013 at 10:08 am

    `#bottom` isn’t showing up because it’s full of floated elements so it collapses on itself. Applying clearfix to bottom fixes your problem, but since you have `head.gif` it’s some sort of checkered background.

    #bottom:after {
    content: “”;
    display: table;
    clear: both;
    }

    That will work as a clearfix for modern browsers, not for older browsers. For other clearfix solutions, [see here](http://css-tricks.com/snippets/css/clear-fix/ “”).

    overflow: hidden; will work, but may cause some unintended consequences later on.

    # January 17, 2013 at 10:13 am

    This because that div either contains divs with no assigned height or are all floated and so it is collapsing.

    You will need to add

    #bottom {
    clear:both;
    height: xxpx;
    }

    amd

    #footer {
    height: xxpx;
    }

    There are other option but that would be the simplest way.

    # January 17, 2013 at 10:14 am

    Well yes that’s true, overflow:hidden will cut absolutely positioned elements, or select boxes if they hang out of the #footer div. But it there will not be any of these, then I don’t see any problem using overflow:hidden as a clearfix solution.

    Cheers.

    # January 17, 2013 at 10:20 am

    OK ChrisP i’ll use it too, Since i need this website for long :)
    Thanks for your valuable suggestion.

    # January 17, 2013 at 11:25 am

    I would like to add to this, that display:table isn’t the best solution because it’s not supported everywhere.The classic crossbrowser solution would be:



    #footer:after {content:'';clear:both;display:block}
    #footer {display:inline-block}
    #footer {display:block}

    # January 17, 2013 at 11:55 am

    @jozsef, you’re correct, but it’s supported down to IE8, http://caniuse.com/#feat=css-table

    As I mentioned, it’s not supported in older browsers, so if he’s looking to design with IE7 or lower in mind, it’s not the best solution..with THAT being said, your inline-block solution is no better, as inline-block was first supported in IE8 as well, in addition, the pseudo-element `:after` wasn’t supported until IE8 either

    http://caniuse.com/#feat=inline-block

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".