4

Example: http://jsbin.com/opokev/20

Full image: http://i53.tinypic.com/347a8uu.jpg

As you can see, I have a body with an offset for the header and the body has an image background. However, the image is not being show in full.

Question: Can I do something with CSS so that the whole image is shown or do I need to use Gimp or photoshop to scale down my image. Currently it is 1400 x 1050 pixels.

Curtis
  • 101,612
  • 66
  • 270
  • 352
yogashi
  • 273
  • 1
  • 5
  • 11
  • It does now, please try. Please let me know whether to scale the image down or I should do something in CSS. If I have to scale the image down then what is an ideal dimension – yogashi Aug 16 '11 at 14:59
  • Here is a list of screen resolutions currently in use: http://gs.statcounter.com/#resolution-ww-monthly-201007-201107 – Diodeus - James MacFarlane Aug 16 '11 at 15:04
  • ...I should have images for all those resolutions? and use media query to display the relative image?? – yogashi Aug 16 '11 at 15:21

4 Answers4

7

I think you are trying to make the image fit the window even if that means the image is distorted.

You can achieve this with background-size property you have already used. But instead of cover you set it to 100% 100%. Live example: http://jsbin.com/opokev/21/

body {
    background: url(http://i53.tinypic.com/347a8uu.jpg) no-repeat center fixed;
    background-position: 0px 85px;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
}
tw16
  • 29,215
  • 7
  • 63
  • 64
0

CSS2 does now allow you to scale background images. You can use a media query through and present a different image, based on the user's resolution.

BTW: Quotes are not required for URL parameters:

    background-image: url(http://s1.postimage.org/gkkq9uc17/Sketch2.jpg);
Community
  • 1
  • 1
Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
  • I don't understand...the problem I'm having is not with resolution but that my image is being cut from the bottom. – yogashi Aug 16 '11 at 14:52
0

In your example, the image is not being shown at all. I suspect this is because you are using postimage.org to host the image, and they are blocking the image request from an external domain (your example). If I substitute the URL for an image hosted on my own server, the image background is displayed using the attributes you have set. I would suggest using a different image host.

The CSS3 background-size: cover; attribute that you are using will scale the image proportionally to fill the browser, based on the horizontal width. There should be no need to scale the image beforehand, although this may not always give you the prettiest result.

Glenn Davidson
  • 104
  • 5
  • I've changed the host and updated the link. so to get the prettiest result I should scale down the original image? What is a good dimension? or is it trial and error? – yogashi Aug 16 '11 at 14:53
  • It depends on how much you want your user to download - you can leave it the current size, and it will be scaled down for any smaller browser windows, but it will be quite a large filesize. When you scale up on windows wider than than the image you will get problems with the image appearance, but you can't really avoid that. Test it by resizing your browser - this should cause the background to scale. – Glenn Davidson Aug 17 '11 at 15:26
  • Note: background-size: cover; will only work properly in recent browsers. Plus it will scale proportionally based on width, so if your browser is full-screen on a wide-screen display, the bottom of the image will be off-screen at the bottom of the browser. More information on how to set up a flexible background like this is available here: http://kimili.com/journal/the-flexible-scalable-background-image-redux – Glenn Davidson Aug 17 '11 at 15:35
0

Yes you can do some trick using HTML and CSS, but your image must to be in tag:

CSS:

  html, body, #body { height:100% }

  #body { position:relative }

  img {
    position:absolute;
    width:100%;
    height:100%;
    display:block;
    z-index:1;
  }

  div#masthead {
    background-color: #262626;
    height: 85px;
    padding: 0;
    width: 100%;
    margin: 0;
    z-index:2;
    position:relative
   }

HTML:

<body>
  <img src="http://i53.tinypic.com/347a8uu.jpg">
  <div id="masthead"></div>
</body>

Check jsbin: http://jsbin.com/izenah/edit#javascript,html

Acaz Souza
  • 8,311
  • 11
  • 54
  • 97