I am working on a website. The background on the homepage is an image. I have tested more resolutions for this website. I put the resolution of 1920x1536 and see the result: Here is my CSS: body.Homepage { background:url(homepage/Background1.jpg) no-repeat top; } How can I scale the image to fit the browser? (besides of re-sizing the photo).

Reputation: 14583

The background is not properly displayed

I am working on a website. The background on the homepage is an image. I have tested more resolutions for this website. I put the resolution of 1920x1536 and see the result:

enter image description here

Here is my CSS:

body.Homepage
{
    background:url(homepage/Background1.jpg) no-repeat top;
}

How can I scale the image to fit the browser? (besides of re-sizing the photo).

Upvotes: 0

Answers (5)

howderek

Reputation: 2244

I accomplished this is a rather hackish way by having a fixed img with a negative z-index and no margin, that was width and height as 100%. http://jsfiddle.net/howderek/jTPUN/

The downside of this is that the background is through HTML rather than CSS, but on the upside there is no JS.

If you want the background image to scroll just have it absolute rather than fixed.

HTML:

<img src="http://derek.genevievehoward.com/images/unicorn.jpg" id="bg" alt=""/>

CSS:

#bg {
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: -1;
    position: fixed;
    top: 0px;
    left: 0px;
}

Upvotes: 1

Jim Brow

Reputation: 36

Keep in mind if you're going to use just CSS that:

contain

Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.

cover

Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area. Contain always fits the entire image within your viewport, leaving opaque borders on either the top-bottom or the left-right whenever the ratio of the background image and browser window are not the same.

Cover always fills the browser window, cutting off some hair or ears in the process, which is what I personally prefer for most cases. You can control how your image is aligned within the viewport by using the background-position property.

This means that using either of these methods will result in the image being scaled proportionally. The only difference being one will cut portions off the image to make it fit, and the other will add white space if the screen resolution doesn't match the aspect ratio of the image.

If your starting image isn't large enough to cover the screen resolution you've indicated (and/or isn't the same aspect ratio), no matter which option you use there will be white space left over.

Upvotes: 0

Alfred

Reputation: 21386

If I understand your question well, I think you want to stretch your background to the browser window size. I don't have a pure CSS solution for this, but a JavaScript + jQuery solution. This will do the trick.

Backstretch is a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element
Full Size Background Image jQuery Plugin: Redux tutorial. Tested it in Safari, Chrome and Firefox and it work perfectly now. All you need is an image that you want to have displayed as your background. Once you have that and use the plugin, the image will resize to the full width/height of the browser window. Every time the browser window resizes, so will the background image.
jQuery scalable fullscreen background image tutorial.

And here is a technique to get Full Screen Background Image using pure CSS. But I have not tested it. Here is the demo.

CSS

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

#full-screen-background-image {
  z-index: -999;
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
}

#wrapper {
  position: relative;
  width: 800px;
  min-height: 400px;
  margin: 100px auto;
  color: #333;
}

HTML

<body>
  <img alt="full screen background image" src="/background.jpg" id="full-screen-background-image" /> 
  <div id="wrapper">
    <p>Content goes here...</p>
  </div>
</body>

Reference: http://paulmason.name/item/full-screen-background-image-pure-css-code

Upvotes: 1