I'm trying to implement a background image that auto resizes depeding on the size of the screen using css3. I've encountered a problem with Chrome that makes scrolling the website vertically really laggy. This doesn't happen on opera, firefox, or IE. Am I missing a declaration in my css code or is Chrome the culprit?
body {
background: #000 url(../images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
padding: 0;
margin: 0 }
I might be a bit late, but I was having a similar problem myself, found the question answered here:
My fixed background made scrolling the site very slow, what can I do to improve it?
It seems the background-size property is what was causing the issue. Of course removing that raises other issues with certain browsers, but maybe using this Jquery plugin might solve that issue, haven't tested it myself though:
http://srobbin.com/jquery-plugins/backstretch/
Probably its all up to rendering in mac os. Mac os using opengl instead of Direct3d in windows. Try to disable\enable hardware acceleration in chrome and check how it works
Related
Just a heads up that object-fit: Cover; is no longer working behaving strangely in the latest Chrome update.(Version 92.0.4515.107 (Official Build) (64-bit), I'm not sure if it's a bug or not!
I've literally just spent an hour trying to figure out if any files had changed whilst developing a website as the slider which uses that CSS rule was no longer working as it should, so I tried on another PC with Chrome and it was working perfect until I updated through the settings. I've submitted a bug report just in-case.
Edit: Although something has definitely changed in the new update with the CSS rules, e.g: in a bootstrap 4.6 carousel, I was forced to use some extra CSS rules so it did not behave like it did in IE. Basically I had a full width carousel, with video as the first slide and a couple of images with buttons etc, which worked perfectly across all browsers apart from IE, adding the below code fixed it.
.bg-slider .carousel-item img{
width:100vw !important;
height:475px;
object-fit: cover;
background-position: center center;
}
.bg-slider .carousel-item video{
width:100vw !important;
height:475px;
object-fit: cover;
background-position: center center;
}
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 the very simple task of applying a background image to a DIV. I can view the image with every other browser except Safari. Can someone take a look at my CSS and site and tell me what I'm doing wrong.
CSS:
#intro2services {
background:linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0)), url(../img/colorpencils.jpg) fixed;
background-position: 100% 100%;
background-size: cover;
background-repeat: no-repeat;
}
Site:
www.designedbysheldon.com
I played around with your site for a few minutes, and I suggest breaking up your styles for the background rather than condensing some while having others declared on their own. Change your CSS to:
#intro2services {
background-position: 100% 100%;
background-size: cover;
background-repeat: no-repeat;
background-image: -moz-linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0)),url('../img/colorpencils.jpg'); /* Firefox-specific background styles */
background-image: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0)), url('../img/colorpencils.jpg');
background-attachment: fixed;
}
That removed the repeat, applied the gradient, and applied the cover sizing correctly. This is tested and working in Chrome and Safari. Firefox only works when the -moz vendor prefix is added. You can add the other vendor prefixes to be safe, but gradients are implemented in the other major browsers at this point.
This is a know issue with Safari. Most of the time, adding a negative z-index to your style, will solve the issue.
z-index:-1:
Apparently Safari--or at least some versions of it--refuses to apply CSS to form fields, so if you have a clever little search box like I do, Safari won't render any CSS applied to it. I thought it was specific to my use of SVGs and then I thought it had something to do with the short code. I was stuck until I found an obscure post on GitHub from a MarcHaunschild from 2011 discussing this behavior. Anyway in the case that you're trying to style a field such as a search box, here's the fix.
Add the following to your CSS:
input[type="search"] {
-webkit-appearance: textfield;
}
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
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. :)