CODEWITHSUNDEEP
htmlcssbackground-image
yogashi
yogashi

Reputation: 273

Image is not displaying in full on a body background

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.

Upvotes: 4

Views: 18700

Answers (4)

Acaz Souza
Acaz Souza

Reputation: 8651

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

Upvotes: 0

tw16
tw16

Reputation: 29625

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%;
}

Upvotes: 7

Glenn Davidson
Glenn Davidson

Reputation: 124

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.

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114437

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);

Upvotes: 0

Related Questions