CODEWITHSUNDEEP
javascripthtmlcss
Thomas Mike
Thomas Mike

Reputation: 1

How do I get an img to fill the viewport?

How can I achieve a full viewport sized img effect like these sites? michaelpumo.com,www.montere.it I want the img to be responsive and fit the entire viewport when someone visits the site. I've tried using a responsive background img on the html element, which did cover the viewport like I wanted, but any new elements added to the page would just go on top of the img. Instead, I want the user to be able to scroll down and see the rest of the page like on those sites. The same problem occured when I used an inline img.

Upvotes: 0

Views: 64

Answers (2)

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9449

Since it is a broad question, here is a broad answer. Use 100vh and 100vw for the image, see fiddle.

img{width: 100vw; height: 100vh;}

Upvotes: 1

O.Rares
O.Rares

Reputation: 1061

Make a div and set to him the id firstview 

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

Change bg.jpg and put the link to your image .

Upvotes: 0

Related Questions