CSS - background-size: cover; not working in Firefox
Well it looks alright to me in latest mozilla.
Try using this if you face problems
body {
background: url("./content/site_data/bg.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: 'Lobster', cursive;
}
Edit
As some more clearance of answer to OP from comments
background: url("./content/site_data/bg.jpg") no-repeat center center fixed;
Its shorthand for,
background-image: url("./content/site_data/bg.jpg");
background-repeat:no-repeat;
background-position: center center;
background-attachment:fixed;
Read more here
Background-size: cover not working in any browser
Looks like this is/was simply a misunderstanding on your end, of what background-size: cover actually does.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size:
[cover] scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.
(“When the image and container have different dimensions” should rather be “have different aspect ratios” – because if they had not different dimensions, but width and height of image and element would be exactly the same, then we would not need to apply background-size in the first place.)
If you want the image to get “squished” instead of clipped – then use background-size: 100% 100%
.
Can I ask you when is generally recommended to use the 100% 100% background-size and when it would be better to use :cover? It's not very clear to me how are they doing two different things in terms of covering the container.
background-size: 100% 100%
means, stretch the image in both dimensions to 100% of the respective container dimension. If the aspect ratio of the image and the element don’t match, the image will be distorted/squished.
cover
however is intended to scale the image to be as large as possible, while keeping it’s aspect ratio.
Think of it like watching a movie on your TV screen. Cinema aspect ratio and TV aspect ratio usually differ (or at least used to, with older TVs.) Now usually you’d want to see all of what is going on in the picture, and not miss anything that happens “on the sides” of the it. Therefor the movie is scaled in a way that it covers the whole width (or height) of the screen, and you get black bars on the top and the bottom (or left/right) – thereby the aspect ratio of the movie is kept – because you would not want to watch a movie distorted, that just looks weird when car tires are ovals and the people have unnaturally wide or long faces.
That analogy make things clearer …?
Firefox and Chrome ignoring background-size?
Your background-size
is placed before your background
shorthand, so the shorthand overrides it with its default value (auto
), preventing your previous background-size
declaration from taking any effect. This is a common gotcha with using shorthand properties.
If this works in Safari, chances are that Safari hasn't updated its background
shorthand to recognize background-size
values, allowing your background-size
to work.
You need to switch them around so your set background-size
value can take effect:
@media only screen and (min-height: 768px) and (max-height: 800px) {
#title-we-are {
background: url(../img/title_we_are.png) bottom center no-repeat;
background-size:95%;
height:254px;
}
}
Workaround for firefox 'background-size: cover' bug
There are two solutions I got.
The first is simply on loading new content do the following:
document.body.backgroundSize = 'auto';
document.body.backgroundSize = 'cover';
Just tells it to recalculate the cover area.
The second is very hacky and literally just tells FF to reapply all the styles.
for(var ss = 0, len = document.styleSheets.length; ss < len; ss++) {
document.styleSheets[ss].disabled = true;
document.styleSheets[ss].disabled = false;
}
That said, I would also report this as a bug to FF (if you haven't already or if it does not exist in the system).
Background image size is not displaying on firefox
background-size
works properly,
but you content is in position:absolute;
so it gives no height
to body, so no background
to see in fact.
Where every other browser use html to draw the background and also move the background-size, firefox keeps background-size attached to the actual size of body, it is morelike a bug in my opinion.
https://www.w3.org/TR/CSS2/colors.html (about backgrounds and colors ... )
You can add:
html {
height:100%;
}
body {
min-height:100%;
}
or use html instead for the background.
backgroundSize cover not working on Firefox
You'll need to make sure to add the following CSS:
html {
height: 100%;
}
body {
background-size: cover;
background-repeat: no-repeat;
height: 100%;
}
Note: If body doesn't have a background already, you can set the background-size via the CSS without having to reset it via JavaScript. Keeps the JS manipulation to a minimum. Same goes for any styling property (except of course your image...unless you want to have a default image).
Section background image not working on firefox
Found the solution the problem was adblock blocking the background image
Related Topics
Using Android Studio with Vuforia
What Are The Semantics of Withvaluebackreference
How to Adjust Text Kerning in Android Textview
Fragmentpageradapter Getitem Is Not Called
Get Color Value Programmatically When It's a Reference (Theme)
Android/View/View$Onunhandledkeyeventlistener (Onmeasure Error)
How Do Popular Apps Authenticate User Requests from Their Mobile App to Their Server
JSONarray Cannot Be Converted to JSONobject Error
How to Configure Gmail in Android Emulator
How to Zoom + Crop a Image and Display the Croped Image on Imageview
How to Use Std::Stoul and Std::Stoull in Android
Android Browser Textarea Scrolls All Over The Place, Is Unusable
Android Webview Cannot Render Youtube Video Embedded via Iframe
How to Set Build and Version Number of Flutter App
Android Linearlayout Gradient Background
Mat (Eclipse Memory Analyzer) - How to View Bitmaps from Memory Dump