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

#1

img
{
max-width:100%;
max-height:100%;
}

#2

Great question! What’s the problem exactly?

#3

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!

#4

instead of max-width did you try width?

1 Like
#5

here is one example:

1 Like
#6

Example :slight_smile:
HTML
<img src="http://c1.staticflickr.com/9/8450/8026519634_f33f3724ea_b.jpg" id="full">

CSS
#full {
width: 100%;
}

1 Like
#7

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

1 Like
#8

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

#9

no , there is no visible change!

#10

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
#11

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


this the pen code
help me!

#12

Example:

#13

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

#14

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

#15

Fixed. Try to read the replies to your question.

#16

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

and see if it shows what you need.

1 Like
#17

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.

#18

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;
}
2 Likes
#19

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

body {
  background-image: url('http://cdn3.collective-evolution.com/assets/forum/uploads/2015/02/jobs1.jpeg');
  background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
  }

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

#20