CODEWITHSUNDEEP
cssresponsive-design
Pompeyo
Pompeyo

Reputation: 1469

Resizing image to fit the display with CSS

Using web responsive design I want to put a big image as background on the frontpage, which always stays 100% width and height. Very similar to https://ghost.org

Here is how I'm trying to do it: http://jsfiddle.net/Jp5AQ/1144/

div img {
    max-width: 100%;
    min-height: 100%;
    height: auto;
    outline: solid 1px red;
}

But it doesn't work correctly. The image is disturbed by resizing the window.

Upvotes: 0

Views: 1898

Answers (7)

aashi
aashi

Reputation: 492

try this css:

.banner-bg { 
    background-image: url(../images/header-bannerbg.png); 
    background-position: fixed; 
    background-repeat: no-repeat; 
    height: 580px; 
    -webkit-background-size: 100% 100%;  
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
}

http://jsfiddle.net/aashi/Jp5AQ/1146/

Upvotes: 1

Jonathan Nicol
Jonathan Nicol

Reputation: 3298

If you want to do this with pure CSS you can use the CSS3 background-size property:

div {
    width: 100%;
    height: 100%;
    background: url(your-image.jpg) no-repeat center center; 
    background-size: cover;
}

Here is a fiddle demonstration:

http://jsfiddle.net/Jp5AQ/1149/

This is the same technique used on the Ghost site you gave as a reference.

Note that I've given the html and body elements height:100% so that the div stretches to fill the height of the viewport.

Upvotes: 1

Timotheus0106
Timotheus0106

Reputation: 1586

just remove the image inserted with an image tag and instead put the image in a div as background.

div: should get height and width of window screen size (most likely with javascript)

insert image with the css style:

div{ background: url(path_to_img/img.jpeg) center center no-repeat; background-size: contain; // you also can use cover, just look how you wish the picture should be cut or not. for background-size you also need some prefix for some browsers } here is the link for css background: http://www.w3schools.com/cssref/css3_pr_background.asp

and here is the link for background-size : http://www.w3schools.com/cssref/css3_pr_background-size.asp

Upvotes: 1

BrendanMullins
BrendanMullins

Reputation: 587

Its hard to do that with an img tag.

it will work a lot better with:

background-size: cover;
background-position: center;

here is a Fiddle of it

Upvotes: 1

Mathieu Bour
Mathieu Bour

Reputation: 696

You can use the property background: cover.
The post maybe be helpful http://css-tricks.com/perfect-full-page-background-image/.

Upvotes: 1

Melinda
Melinda

Reputation: 76

Your image will always be the max-width of the browser window; however, the height will not stay at 100% of the browser window because the image on the screen needs to stay in proportion with the original image. As the width of the browser window shrinks, so will the height.Otherwise your image would be skewed.

Upvotes: 1

Tushar
Tushar

Reputation: 4418

You are using <img /> tag.

Call the image through CSS and use background-size: cover;.

Here is the DEMO

Upvotes: 1

Related Questions