CODEWITHSUNDEEP
htmlimagecss
Umz15
Umz15

Reputation: 61

How can I resize an image so it fits the entire window?

I have an image for a website and I wish to resize it so it covers ANY given screen.

Note:

The only solution I can think of was re-sizing the height and width but that makes the scroll bars appear. I am guessing its a CSS solution I am struggling to create.

Edit:

This is the code I tried, but its "Zooming" the pic to make it stretch across the screen. I would like it to resize it so the quality and the actual pic would show up.

#bg {
  position: fixed; 
  top: 0; 
  left: 0; 

  min-width: 100%;
  min-height: 100%;
}

Upvotes: 2

Views: 3359

Answers (6)

Arushi Chopra
Arushi Chopra

Reputation: 1

For a better css.you must use this 

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Upvotes: 0

KyleMit
KyleMit

Reputation: 29919

Use background-size: cover in CSS on the HTML element

html {
    background: url(http://i.imgur.com/tENv1w4.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}

See this fiddle:

jsFiddle

Upvotes: 0

Appleshell
Appleshell

Reputation: 7388

Anchor it to the sides and set the size to auto.

img#fullscreen {
    height:auto;
    width:100%;
    left:0;
    right:0;
    top:0;
    position:absolute;
}

Working fiddle.

This won't resize to the bottom (the one on the linked page also doesn't) but also doesn't mess the aspect of the image.

Upvotes: 2

Rahul Tripathi
Rahul Tripathi

Reputation: 172438

You may want to check photo-resize option.

Or you may try adding this:-

<img src="picture.jpg" width="100%" alt="">

ie, if you set only one dimension of an image, the other will end up being proportional to it.

or this:-

#image{
min-width:100%;
min-height:100%;
height:auto;
width:auto;
left:0;
right:0;
bottom:0;
top:0;}

Upvotes: 0

timgavin
timgavin

Reputation: 5166

You want to use the CSS background property: http://css-tricks.com/perfect-full-page-background-image/

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Works in:

Safari 3+ Chrome Whatever+ IE 9+ Opera 10+ (Opera 9.5 supported background-size but not the keywords) Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)

Upvotes: 2

Logan Murphy
Logan Murphy

Reputation: 6230

Just use some simple css

#theimg {
    position : fixed; /*can also use absolute and the parent element can have relative*/
    top : 0;
    left : 0;
    width : 100%;
    height : 100%;
}

here is a demo fiddle

http://jsfiddle.net/rg3eK/

Upvotes: 3

Related Questions