Repeating Images HTML and CSS - 【StackMirror】|html|css

I am a little confused on how to get a repeating image with html and css. Here I have this code:

<html>
<head>
    <title>Test</title>
    <link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>

    <div id="top_background"></div>

</body>
</html>

and then in style.css:

/* Reset CSS */

html, body, div, span, h1, h2, h3, h4, h5, h6, p, img, ul, li, fieldset, form, label { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

ol, ul { list-style: none; }

:focus { outline: 0; }

/* Content */

#top_background { background: url(images/header.png) repeat-x; }

But when I load the file it's just a blank web page. Taking out the 'repeat-x' doesn't change anything. I am fairly new to html and css, so I could be doing something completely wrong. Thanks!

html
css

2012-04-04 02:32
by Sawyer Knoblich

Maybe the path to your image is wrong - j08691 2012-04-04 02:36

Dear see my answer and try to implement in your css and set the dimensions as per your need. If i am lagging some where then let me know - w3uiguru 2012-04-04 03:03

Dear if my answer is correct then you can accept it. thats how stack overflow works. cheers - w3uiguru 2012-04-04 04:46

Since it's empty, your <div> has 0 height.

You should set a height in CSS.

2012-04-04 02:36
by SLaks

Or put some content in it - Jukka K. Korpela 2012-04-04 02:41

Or, put the background on the body element - powerbuoy 2012-04-04 02:52

@powerbuoy: That would still need a height - SLaks 2012-04-04 02:53

Thanks! I figured it was something stupid like that : - Sawyer Knoblich 2012-04-04 03:02

Oh absolutely, but if he's publishing a website without content in body I would reconsider publishing it at all - powerbuoy 2012-04-04 03:02

The reason is in your css dimension of id="top_background" is not set. By default div contains it width 100% because div is block level element.

In your case you are repeating background image so we have to set the height of the div to see the background image.

Its up to you how much width and height you want to set.

For example: You want to repeat your background image upto 600px and 200px. For that see below css

#top_background 
{ 
    background: url(images/header.png) repeat-x; 
    width:600px;
    height:200px
}

2012-04-04 03:01
by w3uiguru

Thanks! I didn't know I needed to set a height, I thought it would default to something that worked - Sawyer Knoblich 2012-04-04 04:39

You have not defined height into your #top_background thats why image is not repeating.

so whenever you repeat the image on y-axis or x-axis check the width height and set it according to your requirement.

now you can just add the mentioned below css and can set the width according to your requirement.

#top_background 
{ 
    background: url(images/header.png) repeat-x; 
    height:200px
}

2012-04-04 04:43
by Shailender Arora