I am using background Image by applying below css on main body element in my UI.
.homepage-bg {
margin:0;
padding:0;
background: url("#{imagePath}/homepage/bg.jpg") no-repeat center fixed;
-webkit-background-size: cover; /* pour anciens Chrome et Safari */
background-size: cover; /* version standardisée */
overflow-y: auto;
}
I am facing issue of image compression on Chrome browser on Android devices. (Works fine in firefox)
I have searched on internet regarding this and found some solution like applying pagespeed_no_transform but it didn't worked for me.
I am attaching screenshots of chrome (Not working) and firefox (Working)
Any help please?
Thanks
EDIT:
I tried adding min-height:<SOME GOOD VALUE> (Ex. 600px, 800px) And now the image is stretched to whole page. (ScreenShot Attached below)
My question is why i can't simply apply min-height: 100% in which
image should take full height?
Ok so after doing some troubleshooting, below css done the trick for me.
min-height: 100vh;
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;
}
This is regarding a landing page with a full screen image background.
link to Codepen project
On this pen to replicate the problem, resize your browser screen to a mobile width and hover over the text 'leasing' you will notice a large gap on the bottom of the screen.
I tried to solve this using the following styles:
html, body {
background-image: url("https://greatofficespaces.net/wp-
content/uploads/2019/02/Skokie_Warehouse_For_Lease_Promo.jpg");
/* Full height */
height: 100vh;
width: 100vw;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
When I run this as a local file, instead of a gap on the bottom
there is a doubling of the image at the edge of the browser screen. Also in chrome browser the css is not loading in as it should
and there is a flash of plain black text for a few seconds until the css loads in.
I read about techniques for image optimization on stacked overflow and having different image files for different media queries and srcset, but I do not think its related to that, I think its a bug somewhere in the css.
Here is the full page
https://github.com/KravMaguy/flyer1
Any help on how to fix these css bugs is greatly appreciated.
The problem was fixed by changing it to the following css :
html {
background-image: url("https://greatofficespaces.net/wp-
content/uploads/2019/02/Skokie_Warehouse_For_Lease_Promo.jpg");
/* Full height */
height: 100vh;
width: 100vw;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
specifically removing the word 'body'
the previous css class of body, html {styles etc...} applied the same styles to both the html and the body, When I removed one of them I no longer saw the double image in the corner of the browser, implying that the background was assigned to both the html and the body, producing the doubled image and incorrect css loading. This is my guess as to why this was happening and has been resolved.
I am trying to implement the following codepen for my website :
https://codepen.io/pizza3/pen/NgXowe
When opened with chrome the background images of the slices are positionned correctly and all the slices stacked on each other will display the entire image.
However when browsing with firefox (version Qunatum 60.0.1 (64-bit)) you can notice that the background images are not positionned the same. Seems to me it has to do with the origin point of the images or something similar but I can't figure what the problem is.
I believe the relevant part of the problem is here :
.left,
.right {
position: relative;
width: 50vw;
height: 20vh;
background-attachment: fixed;
background-size: cover;
overflow: hidden;
}
Is this a firefox bug ?
In other words how can I have the same background image spread accross multiple DIVs ?
How can I solve this ?
Thanks
EDIT
Here a couple screenshots to illustrate the problem:
Chrome :
Firefox :
It looks that, though counter-intuitive, the behavior of Firefox(and Edge) is intended and correct as per spec: the transform property (used by the GSAP library for animation) makes background-attachment: fixed behave as scroll. So I'd suggest removing background-attachment: fixed and replacing it with different background-position values for each slice of the image.
May be this answer would also be relevant: https://stackoverflow.com/a/43067630/2533215
I'm building a website that has a full width background image in the header that resizes with the page. There is an unusual flickering horizontal line that appears under the image when it is resized in Firefox. The line does not appear at full with, but blinks on and off when the size is changed. The line appears at the bottom of the background image, not the bottom of the header element.
It appears in the MacOS build of Firefox only when I tested it in OSX 10.8.4, Firefox 23.0. The problem did not appear with Windows 8, Firefox 23.0.1, or in other browsers that I have tested.
Here is the code on my header:
<header>
<h1><span>Sound Soups on Madison - Healthy & Convenient Alternatives for Your Busy Work Week</span><img src="images/sound-soups.jpg" id="logo" alt="Sound Soups"></h1>
<nav id="nav-main">
<?php echo makeLinks($nav1); ?>
</nav>
</header>
header{
padding:0 2.12765957% 35px;
overflow:hidden;
background-image:url('../images/bg-header.jpg');
background-repeat:no-repeat;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
}
I've tried using cover instead of 100% for the background size, and putting padding or a border under the header. Googling the problem didn't turn up anything. Thanks in advance if anyone knows the answer here.
EDIT:
The issue seems to be related to how FireFox scales the background image. The following seems to fix it for me with FireFox 23.0.1 , OSX 10.8.4
In style.css, try changing the background-size property in the header rule from 100% auto to 99.99% auto, ie
header {
background-image: url("../images/bg-header.jpg");
background-repeat: no-repeat;
background-size: 99.99% auto;
margin: 0;
overflow: hidden;
padding: 0 2.12766% 35px;
}
If I'm understanding your question correctly, check the top of the stylesheet # http://soundsoups.julie-edwards.com/css/responsive.css
You have
header{
background-image:url('../images/none.png');
padding-bottom:15px;
border-bottom:2px solid #7a918c;
margin-bottom:20px;
}
I think the border-bottom is the cause of the problem.
Good luck!
Had the same problem for a background-sized image on the body element.
I fixed it by applying the background-sized image to a positioned div element.
If that can be of any help.
I solved this problem by converting my .jpg background image to a .png. In case anyone else runs into this and can't change background-size, try this.
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. :)