img
{
max-width:100%;
max-height:100%;
}
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
?
here is one example:
Example
HTML
<img src="http://c1.staticflickr.com/9/8450/8026519634_f33f3724ea_b.jpg" id="full">
CSS
#full {
width: 100%;
}
That’s 3 votes for width:100%
so far.
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
Example:
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:
img
{
width: 100%;
}
and see if it shows what you need.
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('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