Viewing 8 replies - 1 through 8 (of 8 total)
  • Place the following in your CSS
    .clearfix:after
    {
    display:block;
    content:".";
    height:0;
    visibility:hidden;
    clear:both;
    }

    * html .clearfix
    {
    height:1%;
    }

    add the following to your index file where the content div is located. class="clearfix"

    Then add the following to your stylesheet under the #content
    background-image: url('images/kubrickbg.jpg');
    background-repeat: repeat-y;

    Baring any typos, that should make it work.

    Thread Starter jefpatat

    (@jefpatat)

    Wow, that’s all I can say, I don’t even have a clue what this is supposed to solve. I will try it tonight, can you add a little more expanation what this fixes and how?
    Apperently this is somekind of hack, but then only in non-IE browsers? Is IE then the only one showing it correctly? (:sick:)

    Kind regards and of course many thanks, hope it works out, I will inform you guys later on.

    Yeah,
    The problem is that divs with floated items in them don’t repeat the background because the div doesn’t “extend” beyond the floated divs nested inside of it.

    That’s what the .clearfix hack does.

    Let me know how it works out.

    Thread Starter jefpatat

    (@jefpatat)

    Aha, now I see. I understand the hack. It works out great in Opera although in FF and IE there is a 1px offset. I’ll try to figure this out myself, but if you can help me, any help is welcome.

    Many thanks!

    do you have a url I could look at?

    By the way, this doesn’t work in IE7. I had this same problem today. And also, it’s not a hack – just for the record. It’s something that standard browsers can use to prevent using extra markup and bloating your code – thus, not a hack, but good styling sense. However, the * html thing *is* a hack.

    Do the clearfix thing, but you also need to use conditional comments. In the header of your document, you also need to put this:

    <!--[if IE]>
    <style style="text/css">
    .clearfix {zoom:1;}
    </style>
    <![endif]-->

    The * html thing he’s referring to is to hide it from IE5 on Mac – but it’s not necessary to use that line at all, really (sometimes you do, depends on your situation) – because anything below IE7 will clear it anyway, because IE is set up to function weirdly. but if you *do* use it, put it in the conditional comment – don’t enter it in as a hack – IE5 doesn’t read conditional comments anyway, and it won’t make your stylesheet scream in agony when you go to validate it.

    You can read the explanation of this by the authors at positioniseverything.

    ??

    Thanks doodlebee… good to know!

    Thread Starter jefpatat

    (@jefpatat)

    Thanks doodlebee! I try to understand what I code and I don’t care about IE5 on Mac so I removed that code.

    I was now trying to solve the 1px offset in IE and FF but I’ve been playing a bit too much I suppose, my header background is now removed in FF and IE and I don’t seem to be able to get it back. I feel like a complete idiot.

    Everything should work as in Opera. Also, the images in IE are scaled which mess up my menu, but that’s something else.

    All help is appreciated very much, in the meantime I’ll try to solve it myself.

    https://www.jefspalace.be/blog

    Kind regards!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘adding image to background’ is closed to new replies.