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/
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 - 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.
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.
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 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" />
Does background-size: cover stretch a background image?
It can stretch or constriction depending on image & background size.
It will crops the extra portion which does not matched to div size.
Suppose you have a div with 400*250
, and the background image is 400*350
. If you use background-size: cover
, then to cover all background it need to crop 100px height extra.
or, if you use 200*150 background image, then to cover all the
background it is needed to extend the image minimum 400*300
(200:150=2:1.5, multiply by 2 will 400*300, mind that if height
increases, width also will be increased proportionally)if we make the image 200*150 to 333.33*250, width will be not covered. (though
height is ok)if background image size u used is 800*500 or 200*125 or same proportion to it, no portion of image will be cut down, will see
whole imageFor, 8000*500 size image, it will compressed to cover 400*250 sized background, no portion will cut down but image will be compressed to fit.
Finally, background-size cover property will large or compress the image until all background will be covered, it don't care how waste the image will be.
CSS: Background image to stretch and squash to 100% area of div with no overflow no repeat
You can also try
background-size:100% 100% with
body { width:100% ; height:100%;}
Or
Use object-fit: fill;
fill:The entire object will completely fill the box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be stretched to fit.
refer:https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
Related Topics
Text-Overflow: Ellipsis Not Working
Link with Target="_Blank" and Rel="Noopener Noreferrer" Still Vulnerable
Jenkins - HTML Publisher Plugin - No CSS Is Displayed When Report Is Viewed in Jenkins Server
Do You Have to Include <Link Rel="Icon" Href="Favicon.Ico" Type="Image/X-Icon" />
Turn Off Iphone/Safari Input Element Rounding
Margin While Printing HTML Page
How to Make an Entire HTML Form "Readonly"
How to Render String with HTML Tags in Angular 4+
Absolute Positioning Inside Absolute Position
Center Align Container and Left Align Child Elements
What Is the Performance Impact of the Universal Selector
Borders Disappear in Chrome When I Zoom In
Jquery: 'Uncaught Typeerror: Illegal Invocation' at Ajax Request - Several Elements
Prevent Flex Items from Stretching
Html5/Css3 Circle with Partial Border