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 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 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')";
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
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.
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
Full Screen Background Image Is Stretched
You should really look into the background size property instead of using fixed images. Using 'cover' for background-size, means that the image should grow or shrink just enough to cover the whole background.
If you know the dimensions of the image. You can use a media query to change the background-size to 'auto' when it would otherwise grow beyond it's original size.
html, body {
min-height: 100%;
}
body {
background-image: url(http://leydenlewis.com/images/LANDING_PAGE.jpg);
background-repeat: no-repeat;
background-position: 0 0;
background-size: cover;
}
@media (min-width: 1120px), (min-height: 630px) {
body { background-size: auto; }
}
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 CSS Background Image
ok but then its getting stretched not proportionally:
div.background {
width: 300px;
height: 500px;
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
background-image: url(https://unsplash.it/800/400);
}
cheers
Related Topics
Flexbox Vertical Align Child Top, Center Another
What Is the Best Method for Tidying CSS
Rotate Text and Shrink Its Container to the New Width
Wobbly CSS Animation with Border-Radius in Internet Explorer
ASP.NET MVC 4 Minification & Background Images
Styling HTML5 Number Input (Spin Box) in Chrome
Font Weights Differing in Webkit and Firefox
Resizing CSS Custom Mouse Cursor
Percentage Height in Nested Flex Box
Internet Explorer 10+ Media Queries and Responsive Break Points
Global Disable Magnifying Glass on iOS 9 in Meteor Cordova App
Draw Half Circle with CSS or Svg
Text Color Change on Hover Over Button
How to Make the Absolute Child Width Independent from the Relative Parent Width