CODEWITHSUNDEEP
cssimage
Lee
Lee

Reputation: 1280

Background image size won't stay 100% height

I have got so far on the background of my new website and now i am stuck, the background image goes less than 100% height if you shrink the browser window.

I want it to stay full size and if you shrink it, I don't want the height to go any less than 100% (showing white)

Code here http://www.bestlincs.co.uk/new/

Upvotes: 0

Views: 995

Answers (5)

admin admin
admin admin

Reputation: 1

HTML:

body { 
  margin:0;
  background: url(image.gif) no-repeat; 
  padding: 0;
}

Then the background size will be 100%

Upvotes: 0

Oxudes
Oxudes

Reputation: 51

The solution depends on your needs - one way would be to specify a min-width and min-height attributes in css instead of pure width. As it will scale to whatever size it needs, then position it fixed to the top left corner (mind you, any "overflow" on the right will be cut off).

Source: http://css-tricks.com/perfect-full-page-background-image/

A detailed explanation of your problem: If you set an image to 100% width of its container and do not specify a height, it will always be stretched until it fills out the container, while the height is scaled to keep the image's aspect ratio.

E.g: Take an image that is 200px x 100px large, put it into a 300px wide container with it's width set to 100%. It will be scaled by a factor of 300/200 = 1.5 along both dimension, resulting in an image sized: 300px x 150px. What will happen, if your image has a different aspect ratio than the user's screen? It will simply stretch to full width, then leave the rest blank. Setting a height as well would introduce even more problems, as your image would get distorted.

Upvotes: 0

Akshay
Akshay

Reputation: 14348

In your code you have not defined a height to the image give it a height 100% and it works i tried it in my browser and works fine

Upvotes: 0

Pradeep Pansari
Pradeep Pansari

Reputation: 1297

you can use below code:

html or .classname { 
  background: url(ImageUrlhere) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
}

Upvotes: 2

vaso123
vaso123

Reputation: 12391

Use:

body {margin: 0; padding: 0}

and set the background-size property to cover: http://www.w3schools.com/cssref/css3_pr_background-size.asp

Upvotes: 0

Related Questions