Geek Answers Handbook

The image does not display completely against the background of the body

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

Image: http://i53.tinypic.com/347a8uu.jpg

As you can see, I have a body with an offset for the title, and the body has a background image. However, the image is not displayed fully.

Question: Can I do something with CSS to show the whole image or do I need to use Gimp or Photoshop to reduce the image. Currently it is 1400 x 1050 pixels.

+3
source share
4 answers

I think you are trying to make the image suitable for the window, even if it means that the image is distorted.

You can achieve this with the background-size property you already used. But instead of cover you set the value to 100% 100% . Real-time 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%; }
+1
source

CSS2 now lets you scale background images. You can use the media query through and submit another image based on user permission.

BTW: No quotes required for URL parameters:

  background-image: url(http://s1.postimage.org/gkkq9uc17/Sketch2.jpg);
0
source

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

CSS3 attribute background-size: cover; that you use will scale the image proportionally to fill the browser based on the horizontal width. You do not need to scale the image in advance, although this may not always give you the most beautiful result.

0
source

Yes, you can do some trick using HTML and CSS, but your image should be in the 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

0
source

More articles:


All Articles