Background image only being displayed once

Question

I have a strange problem that I can't get my head around:

I have a header div and I would like to display a background image to be repeated horizontally:

The HTML:

<div id="headerwrapper">

     <div id="header">
          <p>This is an extremely interesting test. This is an extremely interesting test. This is an extremely interesting test.</p>
     </div>

</div>

Here is the CSS:

* {
    margin:0;
    padding:0;
}

#headerwrapper {
    margin:0 auto;
    width:630px;    
}

#header {
    width:630px;
    background-image:url(../images/headermiddleback.jpg);
    background-repeat:repeat-x;
}

When I look at it in the browser, I can see only 1 instance of the background-image being displayed above the text. But it is not repeating.

Any idea what I am doing wrong here?

http://jsfiddle.net/bTuzA/ - seems to work.. Do you have any other CSS that might be overwriting this? — Zoltan Toth, May 27 '12 at 09:38
Hmm interesting, but for example I want the background image to be displayed under each other, not side by side. Am I using the wrong css for "repeat"? — BrokenCode, May 27 '12 at 09:42
yes - for vertical repeat use `repeat-y` instead of `repeat-x` - http://jsfiddle.net/bTuzA/1/ — Zoltan Toth, May 27 '12 at 09:44
Here is what I am getting http://jsfiddle.net/partisanentity/hsTPU/ — BrokenCode, May 27 '12 at 09:47
`repeat-y` - http://jsfiddle.net/hsTPU/4/ and you don't need the `clear: both`-s — Zoltan Toth, May 27 '12 at 09:50
PartisanEntity, what do you *want* to get? Your example looks working to me. — Dmitry Pashkevich, May 27 '12 at 09:56
@ZoltanToth: that was it, please post this as a proper answer and i will accept it. — BrokenCode, May 27 '12 at 10:10

score 0 · Answer 1 · answered May 27 '12 at 09:42

0

Here is your example on jsFiddle, seems to be working. http://jsfiddle.net/MgvLT/1/

Perhaps you have some other CSS that's getting into the way or maybe your background image has lots of empty space. Please post your example on jsFiddle.

answered May 27 '12 at 09:42

Dmitry Pashkevich

13,431
9
55
73

Your jsfiddle example is working perfectly for me (using Google Chrome). I tried increasing the width of #header so I can see if background image gets repeated and it does. What browser are you using? – Dmitry Pashkevich May 27 '12 at 09:53
Strange, I am using FF 12.0 on Mac – BrokenCode May 27 '12 at 09:54
I just emptied the cache, and still it's not working. Could this have something to do with the fact that it is running off a MAMP instance on my Mac? – BrokenCode May 27 '12 at 09:56
MAMP should have nothing to do with it. Are you sure you really want `repeat-x` instead of `repeat-y` as suggested above? – Dmitry Pashkevich May 27 '12 at 09:59
Check the above [jsFiddle](http://jsfiddle.net/hsTPU/4/). I believe this is a case of mistaking horizontal repeat for vertical repeat. – arttronics May 27 '12 at 10:01
Oh my God. You guys are right. I'm so sorry, in shame I must admit I have been trying to get this to work for the past hour and never even considered that I mixed up x and y... Thank you so much :) – BrokenCode May 27 '12 at 10:02

score 0 · Answer 2 · edited May 23 '17 at 10:30

0

Perhaps you need to clear your browsers cache?

For example, here's a SO Post showing how to do it for Chrome.

edited May 23 '17 at 10:30

Community

1
1

answered May 27 '12 at 09:44

arttronics

9,957
2
26
62

Zoltan Toth · Accepted Answer · 2016-11-18T14:25:45.100

0

You might want to use repeat-y instead of repeat-x

#header {
    width:630px;
    background-image:url(http://dl.dropbox.com/u/4457768/css/headermiddleback.jpg);
    background-repeat:repeat-y;
}

edited Nov 18 '16 at 14:25

answered May 27 '12 at 10:32

Zoltan Toth

46,981
12
120
134

Background image only being displayed once

3 Answers3