I have a div with a background image:
<div id="myDiv">
...
</div>
#myDiv {
background-image: url(...);
width: 70%;
max-width: 200px;
}
Now, I want my background image to be resized to fit the div. To do this, a added background-size: 100%. This solves the problem regarding width, but the height only accomodates the content of the, and since the content of this div is smaller, the image is cropped in the bottom. What should I set for the height attribute so that it follows the resizing of the width?
If I understand well, you want the background to be streched and fit exactely to the div. In that case, try to set both values of the background-size property in this way:
background-size: 100% 100%;
Related
How can I make an image fit a whole div (resizing the image if necessary)?
yes, You can use
width: auto;
height: 400px;
object-fit: cover;
Instead of cover you can use contain, fill, etc as per your choice.
You cannot always display with the same dimensions
Because your container may be other sizes
But the normal way is to set the height to 100% and hide it overflow
Or vice versa
width: 100%
or use object-fit: hover
same as:
img {
width:100%;
height:100%;
object-fit:cover;
}
If you provide the height OR width of DIV in %, then the div will be expanded as per the size of the image but if you provide the width and height of the div in pixle "px" then the div will have fixed height and width.
I am attempting to create the effect of the first section in this site:
https://www.bandainamcoent.com/games/dragon-ball-fighterz#
The height of the div is changed on resizing the window so that the background image maintains its aspect ratio and the links positioned on the bottom of the div are still in view.
My current approach only adjusts the width of the background image on resizing. I have a set height on the div just so that the height doesn't collapse in on the content. However, I would like to make it so that the background image determines the height.
.landingPage {
position: relative; //<--This is only here for some absolutely positioned elements in the div
height: 950px;
width: 100%;
background-image: url(../assets/desktopLandingImage.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
It's impossible to have an element expand based on the size of its background image.
To resolve this, what I would recommend is to turn the background image into a child <img> element. On this <img> element, specify both the width and height that were previously on your container. Completely omit the height and width from the parent, and the parent will automatically expand to the size of the image.
This can be seen in the following:
.landingPage > img {
width: 100%;
height: 950px;
}
<div class="landingPage">
<img src="http://placehold.it/100">
</div>
Hope this helps!
I'm trying to fill a whole div with an image, regardless of the size of the image, but for some reason the image is only as big as it's default size. It does not automatically stretch to fit the size of the div. I tried setting the width and height of the image to 100%, thinking that it'll fit the div that way, but the image still stayed in its default size. Is there a way to automatically stretch an image to fill a div, without testing and changing each image by hand?
<style>
div {
border: 1px solid red;
width: 1000px;
height: 1000px;
background-image: url("side.jpg");
background-repeat: no-repeat;
}
img {
width: 100%;
height: 100%;
}
</style>
<div> </div>
From your question, it is unclear whether you are trying to use a background image or an img element to fill the div.
If you want to fill the div using an img element, the code you've posted will already do that for you. You just need to place an img element within the div, such as:
<div><img src="http://placehold.it/250x250" /></div>
If you want to stretch the image to fill the div using it as a background image, you simply need to add the value cover to the background-size property:
background-size:cover;
JSFiddle for img element
JSFiddle for background image
The <img> tag is an html element that has nothing to do with the background image of that <div>.
As APAD1 correctly points out, the proper way to force a background image to fill an html element is to use background-size.
background-size: contain fills the element until the background image touches the first edge of its container (maintaining the aspect ratio).
background-size: cover fills the element entirely while maintaining the aspect ratio of the image.
background-size: 100% 100% fills the element entirely so that the background image touches the edge of the element on all sides (thus potentially distorting the image).
I have a wrapper div that contains arbitrary content (I don't know its length). How can I put a background image that stretches its whole length since background-images doesn't stretch?
I've tried with a div containing a img tag. The div has a lover z-index that the rest of the content and has position: absolute. The problem is that the image is longer that the content and so it just makes it longer (the wrapper has overflow: auto).
<div id="wrapper">
<div id="image-wrapper" style="position: absolute"><img src="bg.jpg"></div>
[.. OTHER CONTENT ..]
</div>
If I set the div and the image's width and height to 100%, it takes the window's height, not the wrapper's.
Any help?
background-size is available since CSS3:
#image {
background-image: url("bg.png");
background-size: auto;
}
auto is the default value and does not stretch the image.
You can set the width and height manually:
#image {
background-size: 100% 100%;
}
or
#image {
background-size: 500px 300px;
}
The alternative: background-size: contain and background-size: cover.
contain stretches the image so that the image is as big as possible but completely visible within the element, whereas cover stretches the image to 100% width, regardless if the image is cropped at the top and/or the bottom.
But the different browsers are not completely consistent when rendering backgrounds with these keywords.
If you are willing to use JavaScript, check out Supersized. It seems to work well for this particular case.
you might also try html5 method on image.
#image-wrapper img {max-width: 100%}
Add position: relative to the styles for #wrapper.
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
div {position: relative;}
#wrapper {
background: url('ocean.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: 100% auto;
}
<body>
<div id="wrapper">
</div>
I am trying alternate ways to present the background image of ocean.png in different elements. Right now I am putting into a div and it isn't showing. Earlier, I put into the body which shows and the image able to stretch fullsize when first stretched horizontally and then vertically on the browser but when I stretch vertically first then background image in body is not stretching full screen, white space on top and bottom.
I am experimenting on a div now but it didn't show up at all.
You have to set the width for the wrapper. width:100% and height:100%
Need to set the width and height of the wrapper div, also if the image is not in the same directory as the CSS the reference is wrong. if you have images in a /images directory you should call them as url(/images/myimage.png)
Set the width and height of the wrapper as others have said and join those css styles in one declaration and you can get rid of all other styles once you set the dimensions of the container.
background: url(ocean.png) center no-repeat