Stretch and scale a CSS image in the background - with CSS only
CSS3 has a nice little attribute called background-size:cover
.
This scales the image so that the background area is completely covered by the background image while maintaining the aspect ratio. The entire area will be covered. However, part of the image may not be visible if the width/height of the resized image is too large.
Stretch and scale CSS background
For modern browsers, you can accomplish this by using background-size
:
body {
background-image: url(bg.jpg);
background-size: cover;
}
cover
means stretching the image either vertically or horizontally so it never tiles/repeats.
That would work for Safari 3 (or later), Chrome, Opera 10+, Firefox 3.6+, and Internet Explorer 9 (or later).
For it to work with lower verions of Internet Explorer, try these CSS:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
How to stretch the background image to fill a div
Add
background-size:100% 100%;
to your css underneath background-image.
You can also specify exact dimensions, i.e.:
background-size: 30px 40px;
Here: JSFiddle
CSS Image size, how to fill, but not stretch?
You can use the css property object-fit
. ("sets how the content of a replaced element, such as an <img>
or <video>
, should be resized to fit its container.")
.cover {
object-fit: cover;
width: 50px;
height: 100px;
}
<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />
Stretch background image css?
.style1 {
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;
}
Works in:
- Safari 3+
- Chrome Whatever+
- IE 9+
- Opera 10+ (Opera 9.5 supported background-size but not the keywords)
- Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)
In addition you can try this for an IE solution
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
zoom: 1;
Credit to this article by Chris Coyier
http://css-tricks.com/perfect-full-page-background-image/
CSS stretch or fit background image
EDIT:
You tried background-size: 100%
,
CSS interprets this as 100% width, automatic height
which will look like this:
background-size: 100% auto;
What you want is the second argument (height) to be 100% too, so you should do this:
background-size: 100% 100%;
END EDIT
Try:
background-size: cover;
This will fit the width or height and overflow the rest
Or:
background-size: contain;
This will make the image as large as possible without changing it's aspect ratio.
You can read more about the css3 background-size property HERE
CSS - Background image stretch horizontally and repeat vertically?
Instead of cover, use background-size: 100% auto;
to size the background image to full browser width while maintaining aspect ratio for its height. Use this in conjunction with background-repeat: repeat-y;
to tile it vertically.
CSS: scale background SVG in only one direction
So I tried around and found a possibility:
- in Inkscape or in a text editor, set the following viewBox according to the size of your image – so if your image is 100*20px set it like this:
viewBox="0 0 100 20"
- in a text editor, add
preserveAspectRatio="none"
to the SVG tag - also, in the SVG tag set the height and width in percents:
width="100%" height="100%"
- in the CSS markup, then simply use
background-size: 100% 20px;
With these steps it is possible to scale the background SVG using CSS in the same way that one would scale any bitmap image.
If image is not wide enough, how to make it stretch to the width of the window?
from the doc
When using layout='fill', the parent element must have position:
relativeThis is necessary for the proper rendering of the image element in
that layout mode.
What can you do is :
CSS :
add relative
to the landingImage class and remove margin auto
.landingImage {
z-index: 0;
background-size: cover;
top: 0;
padding: 0;
display: block;
width: 100vw;
position: relative;
}
Wrap Image on the div
<div className='landingImage '>
<Image
layout='fill' // required
objectFit='cover' // change to suit your needs
src='orcas' //
/>
</div>
Related Topics
Css 100% Height With Padding/Margin
Specificity of Inherited CSS Properties
How to Add a Color Overlay to a Background Image
Rotated Elements in CSS That Affect Their Parent'S Height Correctly
Css 3 Slide-In from Left Transition
How to Set the Size of a Column in a Bootstrap Responsive Table
How to Reverse an Animation on Mouse Out After Hover
How to Change Colour of Blue Highlight on Select Box Dropdown
Use Css3 Transitions With Gradient Backgrounds
What's the Difference Between Align-Content and Align-Items
Difference Between "Screen" and "Only Screen" in Media Queries
Same Font Except Its Weight Seems Different on Different Browsers
Use of Xsl-Fo, Css3 Instead of Css2 to Create Paginated Documents Like Pdf
How to Apply Opacity to a CSS Color Variable
Should I Avoid Using !Important in Css