How to stop background image repeating for empty space?

html css repeat
Aaroninau picture Aaroninau · Sep 26, 2012 · Viewed 73.6k times · Source

Just ran into a problem with repeating background image.

In the case when the content is very short, shorter than the monitor height, the background image is still repeating for the extra space.

Please refer to the screenshot.

Orange bar is my footer. The bottom grey area is the extra space.

Can I make stop the background image repeating for the bottom area?

I mean ideally the background image just repeats as long as my content.

Any help will be appreciated.

My Image.

Answer

Mr_Green picture Mr_Green · Sep 26, 2012

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.

Related questions

make image( not background img) in div repeat?

I'm trying to repeat-y an image that's in a div and no background image but haven't figured how. Could you please point me to a solution? My code looks like this: <div id="rightflower"> <img src="/image/…

Read More
Print header/footer on all pages (Print Mode)

<div id="header">header</div> <div id="content"> content spanning several pages... </div> <div id="footer">Footer - Fixed at the bottom of each page</div> I want …

Read More
Animate bubbles upwards continuously with CSS3?

See the following image: http://i.imgur.com/3vTrB.png See those transparent circles in the background? What i want to do is make them animate from the bottom up, and then manually jump down (off screen) and re-start the …

Read More