i didn´t know how to apply css property background-size in IE8. i found the -ms-filter is solution but how to apply exactly this code:
background-size: 100% auto;
Thanks for any response.
This Code below still not work, can you explain me why it's not working, or give me good example. Really thanks:
html{
width: 100%;
height: 100%;
background-image: url('../img/background.jpg');
background-position: left top;
-ms-background-size: 100% auto;
background-size: 100% auto;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/background.jpg',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/background.jpg',sizingMethod='scale')";
}
Background-size is not supported in IE8 as you can see here:
http://caniuse.com/background-img-opts. I'm not a big fan of css filters.
If you would like a fullscreen background image i suggest to use one of the following solutions:
http://css-tricks.com/perfect-full-page-background-image/
I need to set this background image in my website for chrome and all other browser but in chrome it work perfect but in firefox and other browser doesn't work perfectly. Even for firefox I tried the -moz- tag but doesn't work.
{
position: relative;
background:url(backgrdnd2.jpg);
background-repeat:no-repeat;
-moz-background-size:100% 100%;
background-size:100% 100%;
}
try backgroud-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size:cover;
background-size: cover;
for the rest of the browsers
hope it helps.
The background property is supported in all major browsers. See: http://www.w3schools.com/cssref/css3_pr_background.asp
I'm not sure what element you are applying these styles on, but perhaps that element has no height or width? Try inspecting the element in Chrome or using Firebug in Firefox to determine if your background image is loading, and whether or not the element you are applying the background to is visible.
First, in your css you should put the selector, where do you want to apply the style, for example the body
body {
position: relative;
background:url(http://2.bp.blogspot.com/-m7blv8kfKxs/UiAWmV9uJXI/AAAAAAAAJos/RsYP_YC9FbY/s1600/Background-Textures2.jpg);
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size:cover;
background-size: cover;
}
check this link for more information about selectors.
http://www.w3schools.com/cssref/css_selectors.asp
I also used #EduadoRobles suggestion, check this
http://jsfiddle.net/agusgambina/A8nmp/
That is my client website- http://rubowarkitekter.dk/
I already code to make background image height & width according to adjust screen size/100% height & 100% width. But that is not work on IE11.
My css code-
.home {
background: url(http://rubowarkitekter.dk/wp-content/uploads/2013/12/forside_carlsberg.jpg) center center no-repeat fixed;
background-size: cover;
z-index: -500;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.http://rubowarkitekter.dk/wp-content/uploads/2013/12/forside_carlsberg.jpg', sizingMethod='scale');/* To make IE work */
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://rubowarkitekter.dk/wp-content/uploads/2013/12/forside_carlsberg.jpg', sizingMethod='scale')"; /* To make IE work */
}
Any idea how can i make background image to height & width 100% on IE11.
Thanks
IE11 screenshot-
The issue here is that the image is not a background image. From your code-
<img src="http://rubowarkitekter.dk/wp-content/uploads/2013/12/forside_carlsberg.jpg" class="home">
This is an image element and not a background image added in CSS.
What you should instead be doing is adding the background image either to the "body" element or to your div wrapper.
There are a number of recommendations I feel it important to make-
Use the HTML 5 doctype rather than XHTML transitional
Remove the oncontextmenu event handler on your body element - it will not prevent someone saving your images if they want to, but will annoy your users.
Validate your site, there are 33 errors on the home page - which will mean inconsistent results in browsers for your users. Your site does not work correctly in Google Chrome.
Organise your CSS, I cannot see that code you cited is actually exists in any of the loaded stylesheets (is it currently dev only?).
Where-ever you use vendor prefixes (the -moz, -webkit etc.) these should appear before the standard property (without the prefix) so that it is used instead of the vendor prefix once the property is supported by the browser.
Clear your floats by using something like the CSS tricks clear-fix code. The social media widgets for example.
Do not use position:fixed or position:absolute for layout - you have not control over the viewport/device/window size your users are visiting on, so cannot assume a specific width.
Chris Coyier of CSS-Tricks proposes 3 great solutions which works quite well, 2 of which being pure CSS.
You can read up on this here
Examples
Example 1 (fixed position -- ideal option)
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
#media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
Example 2 (inline image -- next best thing)
HTML
<div id="bg">
<img src="images/bg.jpg" alt="">
</div>
CSS
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
Example 3 (uses filters -- less recommended)
html {
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;
/* IE fallback support */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}
This is probable one of the most basic questions on this website, hence I expect some quick answers. When I try to set a background image for my website I edit the image in paint and I constantly have to edit the image pixel for pixel in order to make the image cover up every single area of the website. Is there any standards or html codings that can automatically set resize the image to the exact size of the website?
You need to do something like this:
/*************************************************************************************
by forcing `height: 100%` in the html and body tag will make sure there are no white areas in vicinity (this is optional though, use it only if you need it)
*************************************************************************************/
html,
body{
height: 100%;
}
/*************************************************************************************
by using `background-size: cover;`, you will make sure the image will cover everything
*************************************************************************************/
body{
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-image: url("your_image.jpg");
}
Also, consider using -moz-, and -webit- prefixes to make sure it works in older browser versions of webkit and gecko based browsers.
In your CSS stylesheet you can use the following code
(where images/bg.jpg is the path for your background image)
html {
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, IE 9+, Opera 10+, Firefox 3.6+
Are you familiar with css? Add the background as image:
<img src="yoursource.png" class="yourclass" />
and use this css snippet:
.yourclass {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -100; /* puts image into the background */
}
I'm assuming you're setting the background image on the body but if not you should be. use background-size: cover; which will stretch the image to fit
Is there a way to get a background in CSS to stretch or scale to fill its container?
Use the CSS 3 property background-size:
#my_container {
background-size: 100% auto; /* width and height, can be %, px or whatever. */
}
This is available for modern browsers, since 2012.
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')";
Scaling an image with CSS is not quite possible, but a similar effect can be achieved in the following manner, though.
Use this markup:
<div id="background">
<img src="img.jpg" class="stretch" alt="" />
</div>
with the following CSS:
#background {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:100%;
}
and you should be done!
In order to scale the image to be "full bleed" and maintain the aspect ratio, you can do this instead:
.stretch { min-width:100%; min-height:100%; width:auto; height:auto; }
It works out quite nicely! If one dimension is cropped, however, it will be cropped on only one side of the image, rather than being evenly cropped on both sides (and centered). I've tested it in Firefox, Webkit, and Internet Explorer 8.
Use the background-size attribute in CSS3:
.class {
background-image: url(bg.gif);
background-size: 100%;
}
EDIT: Modernizr supports detection of background-size support. You can use a JavaScript workaround written to work however you need it and load it dynamically when there is no support. This will keep the code maintainable without resorting to intrusive CSS hacks for certain browsers.
Personally I use a script to deal with it using jQuery, its an adaption of imgsizer. As most designs I do now use width %'s for fluid layouts across devices there is a slight adaptation to one of the loops (accounting for sizes that aren't always 100%):
for (var i = 0; i < images.length; i++) {
var image = images[i],
width = String(image.currentStyle.width);
if (width.indexOf('%') == -1) {
continue;
}
image.origWidth = image.offsetWidth;
image.origHeight = image.offsetHeight;
imgCache.push(image);
c.ieAlpha(image);
image.style.width = width;
}
EDIT:
You may also be interested in jQuery CSS3 Finaliz[s]e.
Try the article background-size. If you use all of the following, it will work in most browsers except Internet Explorer.
.foo {
background-image: url(bg-image.png);
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
}
.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/
Not currently. It will be available in CSS 3, but it will take some time until it's implemented in most browsers.
In one word: no. The only way to stretch an image is with the <img> tag. You'll have to be creative.
This used to be true in 2008, when the answer was written. Today modern browsers support background-size which solves this problem. Beware that IE8 doesn't support it.
Define "stretch and scale"...
If you've got a bitmap format, it's generally not great (graphically speaking) to stretch it and pull it about. You can use repeatable patterns to give the illusion of the same effect. For instance if you have a gradient that gets lighter towards the bottom of the page, then you would use a graphic that's a single pixel wide and the same height as your container (or preferably larger to account for scaling) and then tile it across the page. Likewise, if the gradient ran across the page, it would be one pixel high and wider than your container and repeated down the page.
Normally to give the illusion of it stretching to fill the container when the container grows or shrinks, you make the image larger than the container. Any overlap would not be displayed outside the bounds of the container.
If you want an effect that relies on something like a box with curved edges, then you would stick the left side of your box to the left side of your container with enough overlap that (within reason) no matter how large the container, it never runs out of background and then you layer an image of the right side of the box with curved edges and position it on the right of the container. Thus as the container shrinks or grows, the curved box effect appears to shrink or grow with it - it doesn't in fact, but it gives the illusion that is what's happening.
As for really making the image shrink and grow with the container, you would need to use some layering tricks to make the image appear to function as a background and some javascript to resize it with the container. There's no current way of doing this with CSS...
If you're using vector graphics, you're way outside my realm of expertise I'm afraid.
This is what I've made of it. In the stretch class, I simply changed the height to auto. This way your background picture has always got the same size as the width of the screen and the height will allways have the right size.
#background {
width: 100%;
height: 100%;
position: absolute;
margin-left: 0px;
margin-top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:auto;
}
Add a background-attachment line:
#background {
background-attachment:fixed;
width: 100%;
height: 100%;
position: absolute;
margin-left: 0px;
margin-top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:auto;
}
I would like to point out that this is equivalent to doing:
html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; /* Add background image or gradient to stretch here. */}
Another great solution for this is Srobbin's Backstretch which can be applied to the body or any element on the page - http://srobbin.com/jquery-plugins/backstretch/
Try this
http://jsfiddle.net/5LZ55/4/
body
{
background: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
An additional tip for SolidSmile's cheat is to scale (the proportionate re-sizing) by setting a width and using auto for height.
Ex:
#background {
width: 500px;
height: auto;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
Use the border-image : yourimage property to set your image and scale it upto the entire border of your screen or window .