9

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.

NewUser
  • 3,729
  • 10
  • 57
  • 79
Aaroninau
  • 143
  • 1
  • 3
  • 10
  • 2
    Could you provide code? It seems like you can just give the background image to the content itself. – UniAvenger Sep 26 '12 at 04:21
  • 1
    @UniAvenger I agree. I'm assuming from the picture the background image is being given to the body rather than the content. Your solution should fix that. But source code would be helpful. – Michael Peterson Sep 26 '12 at 04:22

5 Answers5

22

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.

Mr_Green
  • 40,727
  • 45
  • 159
  • 271
7

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.

danielsan
  • 426
  • 1
  • 4
  • 7
2

you can set your background directly in CSS making like so:

body {
 background: url(../images/background.jpg);
 background-size: cover;
 background-repeat: no-repeat;
}

Hope this helps :D

PremiumBanana
  • 21
  • 4
1

It would be good if you could post your code here.

Try something like this:

<div>     
 <div>
  <div style="float:left;"></div>
  <div style="float:left;"></div>
  <div style="clear:both"></div>
 </div>
 <div class="footer"></div>
</div>
Manoj De Mel
  • 927
  • 9
  • 16
0

Try this in the style section.

background-size: cover;
background-repeat:no-repeat;
Mohamed Sabry
  • 2,585
  • 1
  • 8
  • 13