How to make the size of the image equal to the size of the screen?


Great question! What’s the problem exactly?

i am trying to build a webpage using css and html only and i want homepage to have a full screen image as the size of the screen but i am not able to get that!

instead of max-width did you try width?

1 Like

here is one example:

1 Like

Example :slight_smile:
<img src="" id="full">

#full {
width: 100%;

1 Like

That’s 3 votes for width:100% so far.

1 Like

the image is used as a background i am not using it as a background.
i want it to be a div element.

no , there is no visible change!

Yep as @JohnnyBizzel said max-width is not to get something take the entire screen, use width instead.
If you want to know why width and no max-width check this link with an example :slight_smile:

1 Like

@JohnnyBizzel that is not working!
@Egmeier that is not working here

this the pen code
help me!


can you explain me that please.
what is meta in that?

I think he is trying to get the image to cover the parent div? I’m not sure what you are asking.

Fixed. Try to read the replies to your question.

Wait bro, try this in your CSS:
width: 100%;

and see if it shows what you need.

1 Like

Yeah you where trying to modify your “body”, instead of the “img” itself, and remember max-width is not for setting the size of the img.

This article describes a bunch of ways to make a full page background image.

First one is probably the best way to go:

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;

You don’t need any HTML, just this CSS:

body {
  background-image: url('');
  background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-position: center;

I now see that @nr-mihaylov basically said the same thing