0

I have a large image I would like as my background, but for some reason it repeats a little bit on my large screen. Is there a way I can just have the image size up or down according to screen size?

EDIT: So I have changed my HTML to look like this:

<body id="wrapper">
   <div id="body">
       <img src="/images/sky2.jpg" class="stretch" alt="" />
  </div>

and my CSS to this:

#body {
   width: 100%; 
   height: 100%; 
   position: absolute; 
   left: 0px; 
   top: 0px; 
   z-index: 0;
  }

.stretch {
width:100%;
 height:100%;
}

And the background won't show on preview. I have 3 other div elements that show but only to a white background =/.

Sapp
  • 1,793
  • 7
  • 29
  • 51
  • Your code makes little sense :D First you say `Here is my HTML`, but you provide basically just CSS. And your CSS appears to be looking for an element with an `id` of `body`. You don't have ``, do you? – thirtydot Mar 09 '11 at 21:13
  • You mean a div tag? No that's what it is like in my html lol – Sapp Mar 09 '11 at 21:15
  • @Sapp: Fair enough then, if that is your HTML. I thought it more likely you'd mistakenly prepended the selector with a `#`. – thirtydot Mar 09 '11 at 21:20
  • It is off a sample I pulled from another site that I was having trouble with. I guess it is best to create a div tag instead and use those elements? – Sapp Mar 09 '11 at 21:22
  • @Sapp: It would be a good idea, even if it's only to avoid confusion. – thirtydot Mar 09 '11 at 21:23
  • I changed to a div tag, but the page loads with no background image. – Sapp Mar 09 '11 at 21:41
  • @Sapp: I unfortunately seem to have confused you a little bit :( Could you describe the end effect you're trying to make? An `` that acts like a page background which expands to the width of the browser window on resize? – thirtydot Mar 09 '11 at 21:44
  • Hah it's ok. Yea, I basically need a large image to act as the background for my home page. The image will need to expand and contract accordingly with the screen size of the computer. – Sapp Mar 09 '11 at 22:10
  • @Sapp: [This answer](http://stackoverflow.com/questions/5252189/background-repeats-and-i-am-not-sure-why/5252238#5252238) is probably what you're after. – thirtydot Mar 09 '11 at 22:30

5 Answers5

2

move background-repeat: no-repeat; to the #body instead of #body img

vittore
  • 17,449
  • 6
  • 44
  • 82
2

You aren't actually showing any of your html here, just some embedded CSS and some (I assume linked?) CSS. You are loading the image as a background-image on the body element in that first bit of css, which is great. Because it's loaded as a background-image in CSS, and not and tag in HTML, your second bit of CSS (with the #body img selector) is not affecting it in any way.

What you actually have, in effect, is this:

#body {
   position:fixed; 
   top:-50%; 
   left:-50%; 
   width:200%; 
   height:200%;
   position:relative;
   background-image: url(images/sky2.JPG);
}

Which is a very odd bit of code. But the only relevant part to your question is the background-image part. The answer has several parts. In CSS2: no, you cannot adjust the size of a background image. You can set it not to repeat (as others have shown) and you can set it's position:

body {
  background-position: center left;
}

In CSS3 you can change the size, and you have several options (you are looking for cover, I think) but it only works for the latest browsers. The property is called background-size, but because it is still experimental, you have to declare it individually for each browser:

/* this is the default */
body {
  -moz-background-size: auto;
  -webkit-background-size: auto;
  -o-background-size: auto;
  background-size: auto;
}

/* this will size the image proportionally so that it is contained, but not cropped */
body {
  -moz-background-size: contain;
  -webkit-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
}

/* this will size the image proportionally so that it fills all the area */
body {
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* this will size the image as a percentage of the area */
.example #percent {
  -moz-background-size: 50% 50%;
  -webkit-background-size: 50% 50%;
  -o-background-size: 50% 50%;
  background-size: 50% 50%;
}

/* this will size the image to exact specifications */
.example #absolute {
  -moz-background-size: 100px 25px;
  -webkit-background-size: 100px 25px;
  -o-background-size: 100px 25px;
  background-size: 100px 25px;
}
Miriam Suzanne
  • 13,632
  • 2
  • 38
  • 43
1
<style type="text/css">
body {
background-image: url(images/sky2.JPG);
background-repeat: no-repeat;
}   
</style>

You need to set it for the same element or class or whatever. Also you could move the body css into your css.

Ok, I'm sorry there are some other things wrong, like #body {. I don't think you have an element with an id "body". Not trying to RTFM, but maybe read some tutorials on CSS?

To scale the image, maybe have a look at: Stretch and scale a CSS image in the background - with CSS only

Community
  • 1
  • 1
lawl0r
  • 840
  • 6
  • 16
1
#img.source-image {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
}

Demo page: http://css-tricks.com/examples/ImageToBackgroundImage/

Source: http://css-tricks.com/how-to-resizeable-background-image/

I think it's worth to read that page :)

  • Awesome thanks - any idea why there might be a horizontal scroll with a tad of white space occuring? – Sapp Mar 09 '11 at 23:20
1

1) The CSS property background-repeat: no-repeat; should be on the body element itself, i.e. on the element you're specifying the background of.

2) In the CSS, you write #body... I guess you want to talk about the body element? Then you should just write body in the CSS. #body would be for an element declared as, say, <div id="body">.

3) Also, I'm unsure about #body img. #body img means “an img element inside the body”. Do you really have an img element inside the body? I mean, is your markup like this?

<body>
   ...
   <img ... >
   ...
</body>

And do you really want to style that img element?

Anyway, the style that applies to the img element has nothing to do with the body's background.

ChrisJ
  • 5,161
  • 25
  • 20
  • I pulled some of the code off of a site and tweaked it a bit. – Sapp Mar 09 '11 at 21:24
  • Okay. Then maybe you have to adapt it. Please consider my three comments: if you're able to address them all, then you should be almost done :-) – ChrisJ Mar 09 '11 at 21:27