I've got the following code running on an element that spans 100% of the browser:
#section_white {
background-attachment:fixed;
background-image:url(image_url_here.jpg);
background-position:100% 100%;
background-repeat:no-repeat no-repeat;
background-size:cover;
}
What I need to do is to have the image span the entire width of the browser, while remaining fixed (thereby allowing the content to scroll on top of it).
It seems to work on all the browsers except Safari - any ideas what I'm missing?
I've tried setting the element height and min-height to 100%, with no joy.
A link to a demo page can be seen here: http://oscarsarc.tinygiantstudios.co.za/adopt/adopt-nationwide/
Turns out Safari for Windows is no longer supported (how did I miss this?!) and the one I'm using is far too old to be useful. Using OSX / Safari, things look peachy (according to Benjamin)
So this will help since background-size is partially supported in your version of safari you should use prefix just as below
html {
background: url(image_url_here.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Try this and let me know any issues.
SOURCE LINK
CHECK BROWSER SUPPORT
Related
I have viewed several answers on SO related to this question and have used that to write my css code as such (I was using short-hand before):
#intro {
background-image: url(http://www.trbimg.com/img-5a98709c/turbine/ct-met-illinois-legislature-marijuana-20180301);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
This works fine on my computer and in developer tools on Chrome when I resize the window or change the view to, say, iPhone X.
When I use my actual iPhone to go to the site, only a gray background displays, no image at all. I've tried in both Chrome and Safari.
Does anyone have some insight as to why that might be?
What I have tried:
Viewed similar questions on SO which helped me re-write my CSS without using the shorthand background
Stored the image on my server and shrunk it so it had a width of 1000px (half of its original width)
I plan on actually storing the image on my server in the future but I figured if anyone has the time to help me out a link to the large image online would be best.
Edit:
I have put together a CodePen for the #intro element.
I have this CSS to show a water mark inside a div:
background-image: url("../Images/Watermark02.png") !important;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
the behavior is shown in the below image, can somebody help me and tell me what is missing to get it to work on Chrome just like FF?
You can fix this by removing background-attachment: fixed. The "fixed" value is relative to the screen, not the you have the background image inside of. Granted it's possible this is due to something else, but I will need to see the rest of your CSS/HTML.
background-attachment: fixed; /* Remove this */
I've set up a jsfiddle for you here: http://jsfiddle.net/HkBh4/
I want to load an image via css that stretches to the entire screen. The css:
body {
background: url(images/reelgoodguide2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: auto;
margin: 0px;
padding: 0px;
}
Which works perfectly in Chrome and Firefox and IE9.
There is a conditional in the html to include an additional css file if the browser is IE8 or IE7. This css contains:
body{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/reelgoodguide2.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/reelgoodguide2.jpg', sizingMethod='scale')";
}
But instead of alphaimageloader stretching the image to the entire screen, the image remains centered and it and does not resize.
Note: when I open developer tools I can see that the css file is there. When I disable the filter property, nothing happens. Any tips to what Im doing wrong?
Thanks in advance.
OKAY... After a grueling bit of fiddling, this is what i figured out:
First:
The filter path to an image is relative to the html document, not the css file. FRUSTRATING
Second:
I got this to work by applying the filter to html instead of body.
I had read that the IE workaround were not to be applied to html but what I noticed was that there was (after I had cleared up the image path problem) a stretched bacground image but it was behind everything else.
I think it's not possible with CSS alone. Search for supersized. You will find some JavaScript libs.
One more useful answer to solve IE8 background issue is:
Download backgroundsize.min.htc and put it inside your project.
Now simply add these lines in your css:
.class_name{
//your other properties
background-size: cover;
-ms-behavior: url(backgroundsize.min.htc);
}
NOTE: use the url according to your project setup.
Enjoy this simple solution. :)
i am trying to embed an image within an iframe, the size of which i am not sure.
i tried as below but it does not seem to work.
please let me know how to proceed.
what i exactly want to do is, the image should auto-fit into the page. image is smaller than the page, so when i remove no-repeat multiple instances of image are visible on the screen.
Please help thanks.
body{
background-image:url(someimageurl);
width:1400px;
height:1600px;
background-repeat:no-repeat;
}
Rodin is on the right track. In pure CSS you can only do it with CSS3 and only the latest versions of browsers are going to work. You can however fake it by putting an absolutely positioned image in the corner of the page with width and height set to 100%. Then some z-index work to put the content over the top of the image.
The HTML:
<img class="background" />
<div class="wrapper">
content goes here
</div>
The CSS:
img.background{position:fixed;top:0;left:0;width:100%;height:100%;z-index}
div.wrapper{position:relative;z-index:1;}
See it here - http://jsfiddle.net/snkg8/
FYI - this won't work in IE6 without some extra CSS hacks, but I don't bother with IE6 anymore.
You have a css property for the background size:
background-size: 100%;
Unfortunately, it is a CSS3 property and only supported in the newest browsers (IE9, Firefox4)
By using css3,
html {
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This works in all browsers and ie9+.
The following filters works in ie7 and ie8 too.
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale')";
Is there any known way to make the CSS style background-size work in IE?
A bit late, but this could also be useful. There is an IE filter, for IE 5.5+, which you can apply:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale')";
However, this scales the entire image to fit in the allocated area, so if you're using a sprite, this may cause issues.
Specification: AlphaImageLoader Filter #microsoft
I created jquery.backgroundSize.js: a 1.5K jquery plugin that can be used as a IE8 fallback for "cover" and "contain" values. Have a look at the demo.
Thanks to this post, my full css for cross browser happiness is:
<style>
.backgroundpic {
background-image: url('img/home.jpg');
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='img/home.jpg',
sizingMethod='scale');
}
</style>
It's been so long since I've worked on this piece of code, but I'd like to add for more browser compatibility I've appended this to my CSS for more browser compatibility:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Even later, but this could be usefull too. There is the jQuery-backstretch-plugin you can use as a polyfill for background-size: cover. I guess it must be possible (and fairly simple) to grab the css-background-url property with jQuery and feed it to the jQuery-backstretch plugin. Good practice would be to test for background-size-support with modernizr and use this plugin as a fallback.
The backstretch-plugin was mentioned on SO here.The jQuery-backstretch-plugin-site is here.
In similar fashion you could make a jQuery-plugin or script that makes background-size work in your situation (background-size: 100%) and in IE8-. So to answer your question: Yes there is a way but atm there is no plug-and-play solution (ie you have to do some coding yourself).
(disclaimer: I didn't examine the backstretch-plugin thoroughly but it seems to do the same as background-size: cover)
There is a good polyfill for that: louisremi/background-size-polyfill
To quote the documentation:
Upload backgroundsize.min.htc to your website, along with the
.htaccess that will send the mime-type required by IE (Apache only —
it's built in nginx, node and IIS).
Everywhere you use background-size in your CSS, add a reference to
this file.
.selector {
background-size: cover;
/* The url is relative to the document, not to the css file! */
/* Prefer absolute urls to avoid confusion. */
-ms-behavior: url(/backgroundsize.min.htc);
}
In IE11 Windows 7 this worked for me,
background-size: 100% 100%;
you can use this file
(https://github.com/louisremi/background-size-polyfill “background-size polyfill”) for IE8 that is really simple to use:
.selector {
background-size: cover;
-ms-behavior: url(/backgroundsize.min.htc);
}
I tried with the following script -
.selector {
background-image: url("img/image.jpg");
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
}
It worked for me!