Title: adding image to background
Last modified: August 18, 2016

---

# adding image to background

 *  [jefpatat](https://wordpress.org/support/users/jefpatat/)
 * (@jefpatat)
 * [19 years, 6 months ago](https://wordpress.org/support/topic/adding-image-to-background/)
 * Hi all,
 * I’m quite proud of my accomplishments, but I’m struggling on the page background.
   I have been trying almost everything, resizing the image, resizing the width,…
   
   I just want the image http [http://www.jefspalace.be/blog/wp-content/themes/JefsPalace/images/kubrickbg.jpg](http://www.jefspalace.be/blog/wp-content/themes/JefsPalace/images/kubrickbg.jpg)(
   look carfully, it is quite light shaded) to appear between the header and the
   footer. A background color works out, but not an image!
 * The blog can be found at [http://www.jefspalace.be/blog](http://www.jefspalace.be/blog)
 * kind regards, Jef
 * Remark: this apperently this only happens in Opera(my standard browser) and not
   in IE(which totally messes up my layout)

Viewing 8 replies - 1 through 8 (of 8 total)

 *  [Glenn Ansley](https://wordpress.org/support/users/blepoxp/)
 * (@blepoxp)
 * [19 years, 6 months ago](https://wordpress.org/support/topic/adding-image-to-background/#post-492824)
 * 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](https://wordpress.org/support/users/jefpatat/)
 * (@jefpatat)
 * [19 years, 6 months ago](https://wordpress.org/support/topic/adding-image-to-background/#post-492864)
 * 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.
 *  [Glenn Ansley](https://wordpress.org/support/users/blepoxp/)
 * (@blepoxp)
 * [19 years, 6 months ago](https://wordpress.org/support/topic/adding-image-to-background/#post-492871)
 * 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](https://wordpress.org/support/users/jefpatat/)
 * (@jefpatat)
 * [19 years, 6 months ago](https://wordpress.org/support/topic/adding-image-to-background/#post-492929)
 * 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!
 *  [Glenn Ansley](https://wordpress.org/support/users/blepoxp/)
 * (@blepoxp)
 * [19 years, 6 months ago](https://wordpress.org/support/topic/adding-image-to-background/#post-492999)
 * do you have a url I could look at?
 *  [Doodlebee](https://wordpress.org/support/users/doodlebee/)
 * (@doodlebee)
 * [19 years, 6 months ago](https://wordpress.org/support/topic/adding-image-to-background/#post-493022)
 * 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](http://www.positioniseverything.net/easyclearing.html).
 * 🙂
 *  [Glenn Ansley](https://wordpress.org/support/users/blepoxp/)
 * (@blepoxp)
 * [19 years, 6 months ago](https://wordpress.org/support/topic/adding-image-to-background/#post-493023)
 * Thanks doodlebee… good to know!
 *  Thread Starter [jefpatat](https://wordpress.org/support/users/jefpatat/)
 * (@jefpatat)
 * [19 years, 6 months ago](https://wordpress.org/support/topic/adding-image-to-background/#post-493197)
 * 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.
 * [http://www.jefspalace.be/blog](http://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.

 * 8 replies
 * 3 participants
 * Last reply from: [jefpatat](https://wordpress.org/support/users/jefpatat/)
 * Last activity: [19 years, 6 months ago](https://wordpress.org/support/topic/adding-image-to-background/#post-493197)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics