One of the problems i have is the more wide the page is, the more image is hidden. To be more clear, i want the whole image to always be visible and stretch or shring when needed. Here’s the code im using
<html>
<head>
<style>
#image_div{
background-image:url("http://i.imgur.com/fIEldZQ.jpg");
width:100%;
height:200px;
background-repeat:no-repeat;
background-size:cover;
</style>
</head>
<body>
<div id="image_div">
</div>
</body>
</html>
Change background-size:cover; to background-size:contain;
Tried that but that way the image width doesnt go 100% for some reason
The reason is, it is “contained” within a container that is only 200px high, any wider and it will be vertically cropped and you wanted the whole image visible.
So what do you really want to happen? 
If I understand what you want, you want something more like this. Note: adapted from here
<html>
<head>
<style>
#image_div img {
/* Set rules to fill background */
max-height: 200px;
min-height: 200px;
min-width: 100%;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px){
#image_div img {
left: 50%;
margin-left: -512px; }
}
</style>
</head>
<body>
<div id="image_div">
<img src="http://i.imgur.com/fIEldZQ.jpg" />
</div>
</body>
</html>
i want the height to be stable but the width always 100% of the page meaning it will sometimes stretch the image. Anyways i found that it can only be achieved with img src and not from css
thank you!
By stable you mean a fixed size?
So you don’t want to maintain the aspect ratio?
You can explicitly set the size of a background image.
The background-size property can take numbers and units instead of keywords.
background-size: 100% 200px;
hmm i was happy to hear that but im afraid it doesnt work. It shows nothing unless i give a seperate height:200px
Of course not, an empty container will have no height unless you specify one via css.
As always, the correct method depends upon context, which we don’t have, presumably this is not going to be an empty web page.
I warn against designing your site before adding content.
You can’t decorate a house that has yet to be built, the paint won’t stick.
Great, it works! Thanks for the advice too ill keep it it mind!
You shouldn’t really be stretching images of things that are real life. If its a picture of a person a place or an object then it really needs to maintain its aspect ratio when its is stretched/squashed.
If the image is an abstract decoration then yes you can stretch it but if you are stretching a landscape or a person to fit your screen by stretching or squashing then generally that is considered bad practice and amateurish.
There are odd exceptions where you stretch the image for effect or if perhaps its just something like grass or a field or sky but generally don’t squash real life images without preserving the aspect ratio unless that’s what you meant to do.
And in this case it should be a background, not an <img>.
HTML is content, CSS is decoration.
Yes of course I wasn’t specifically talking about foreground images but all images in general. The normal criteria for what constitutes a background or foreground image still applies.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.