How to stop background image repeating for empty space?

Rather than sticking the background onto the body, slap another div in there and put the background onto that. The inner content will push the div to the right height and will stop at that point (unless otherwise stated).

eg:

<!doctype html>
<html>
<body>
    <div id="background">
        Your inner content
    </div>    
</body>
</html>

and put your repeating background onto #background in your css rather than your body.


You can use the below property.

background-repeat:no-repeat;

For more information go through this site

You can also give repeat-y or repeat-x to make the background-image repeat vertically or horizontally respectively.

If you want to give dimensions to your background image then you can use

background-size:100px 100px; /* width height */

I think this is what you mean.

Tags:

Html

Css

Repeat

Recent Posts