I am fairly new to the frontend and css. I am trying to add a background-image in such a way that, if .avif files are supported, then these are loaded. Otherwise fallback to a .png file. I'm wondering if it is possible to do this without javascript and without loading all the images to not affect page speed. I am running Chrome 107.0.5304.110, ios 16.1 in (mostly)simulator (I know older versions of ios dont support avif, but the latest one does. Would like something that works with both) , and Firefox 106.0.1.
Attempt 1 follows this previous answer. Note the usage of webkit-image-set. Here is my code:
background-image: url("/static/img/image.png");
background-image: -webkit-image-set(url("/static/img/image.avif")1x );
Doing this works for Chrome and Firefox, but Safari on ios shows a gray image.
Attempt 2 follows the answer on this blog. Note that here image-set is used. Code:
background-image: url("/static/img/image.png");
background-image: image-set(
url("/static/img/image.avif") 1x,
url("/static/img/image.png") 1x,
);
This is visible on all three browsers, but the png is always shown. I also invert the positions in the image-set but same results. Always png.
Attempt 3, a slight variation of attempt 2. I just change the format on the first line.
background-image: url("/static/img/image.avif");
background-image: image-set(
url("/static/img/image.avif") 1x,
url("/static/img/image.png") 1x,
);
This works well on chrome/firefox, but ios is gray.
Is there a way to solve this problem? Thanks!
background-image: url("/static/img/image.avif"),url("/static/img/image.avif") 1x,url("/static/img/image.png") 1x;
It seem's that image-set are partially supported on Safari browsers,
source
caniuse
You can simply use
background-image:
url("/static/img/image.avif"),
url("/static/img/image.jpeg");
you can test on sandbox below that on Firefox avif is used and on safari jpg is used as fallback.
codesandbox
As MDN usage examples there's no inbuilt fallback for image-set(), therefore putting an background-image before.
.box {
background-image: url("large-balloons.jpg");
background-image: image-set(
"large-balloons.avif" type("image/avif"),
"large-balloons.jpg" type("image/jpeg")
);
}
also as you can see above the example uses type param, which safari doesn't support.
Another solution you can use is to have #media selectors specifically for safari and put specific code for this browser there:
Media query for safari browser
I want to set different background image for IE8 with Less, as it doesn't support background-size.
I have searched in Google about IE8 hacks and the result is writing code like this height: 300px\9;, ending with \9.
I have tried this, but I find it doesn't support background-image setting.
If I write like this
.backgroundImage(#url) {
background-image: url('#{base_url}#{url}.png');
background-image: e("url('#{base_url}x/#{url}.png')\9");
}
#demo {
.backgroundImage('large_cloud');
}
,
the Less compiler gives an error, and if I set height: 300px\9; like this, the compiler doesn't show any errors.
So, I'm very confusing. How to use Less hack for setting background-image in IE8.
Less is written to be compatible with proper CSS and so it may not always work properly when used for hacks. While some hacks like the height and color (in the thread linked below) may work, it is not a guarantee that all would work. If you need values with hacks to compile properly then it is safe to do CSS escaping for the value like below:
#demo{
background-image: ~"url('myimage-400px.png')\9";
}
or as
#demo{
background-image: e("url('myimage-400px.png')\9");
}
The above solution is purely one for the Less compiler error and I don't have much idea if that actually works in IE8 or not. If that method does not work then you may want to have a look at the options that are suggested in this SO thread.
Note: This question is similar to this one but it is not the same because that is about property name interpolation whereas this one is more about values.
You should avoid hacks altogether. Instead, conditionally serve a stylesheet to IE 8 users that addresses the version-specific issues you're facing.
<link href="styles.css" rel="stylesheet" />
<!--[if IE 8]><link href="ie8.css" rel="stylesheet" /><![endif]-->
Relying upon syntactic quirks often causes unintended side-effects, and generally come with a larger affected scope than advertised. Conditional Comments, on the other hand, are inherently designed to apply version-specific instruction.
Here's the technique I use and the trick to getting it to compile when writen in LESS.
1) write your background css for older browsers that doesn't include the background-size property.
eg: background:transparent url(/img/path-to-image-ie8.png) 0% 0% no-repeat;
2) write your background css for modern browsers that does include the background-size property. eg: background:transparent url(/img/path-to-image.png) 0% 0%/100% auto no-repeat;
Old browsers wont recognise the second line and will ignore it, modern browsers will overwrite the first line with the second.
The trick to getting it to compile in LESS is to write the / like this:
background:transparent url(/img/path-to-image.png) 0% 0%~"/"100% auto no-repeat;
I see some answers to backgrounds not showing up on Chrome but on IE and Firefox, but that was just refreshing the cache. Tried specifying the conditions for background-size didn't change anything. Not sure why it works on Chrome, but doesn't show up at all in Firefox or IE. Maybe IE can't handle multiple backgrounds, but at the very least I'd like to get it up on Firefox if possible. Any thoughts?
Here is the code:
body{
background-image: url(http://pocketyourpower.com/index.php/admin/cms_wysiwyg/directive/___directive/e3ttZWRpYSB1cmw9Ind5c2l3eWcvYmFja2dSTy5qcGcifX0,/key/5bf910ba704cb793ba25145022f9caa3/),
url (http://pocketyourpower.com/index.php/admin/cms_wysiwyg/directive/___directive/e3ttZWRpYSB1cmw9Ind5c2l3eWcvYmFja2dST3JpZ2h0LmpwZyJ9fQ,,/key/5bf910ba704cb793ba25145022f9caa3/);
background-size:93px 99px;
background-repeat: repeat-y, repeat-y;
background-position:left, center right;
}
Shows up fine here.
Not sure why doesn't work on Mozilla or IE.
I don't know what are you doing here, your image url are not pointing to images at all...
Demo
CSS
body {
background-image: url(http://www.xtec.cat/centres/a8026907/Index/google.jpg), url(http://www.posicionamientoenlaweb.es/wp-content/uploads/2011/03/google.png);
background-size:93px 99px;
background-repeat: repeat-y, repeat-y;
background-position:left, center right;
}
I assume, you are using Magento.
In that case, the solution is to change just one setting in admin :
System -> Configuration -> General -> Content Management -> Use Static URLs for Media Content in WYSIWYG for Catalog to Yes
As Your image URLs were generated by Magento WYSIWYG editor, and the setting above was set to No, you had broken links in the front end.
I am reverse engineering a previous employee's work and noticed a number of css classes look like this...
.img-shadow {
float:left;
background: url(../images/shadowAlpha.png) no-repeat bottom right !important;
background: url(../images/shadow.gif) no-repeat bottom right;
}
Can anybody think of a reason for a css class to declare background twice like this (specifically with the !important)?
According to wikipedia, the second background rule is for IE6.
Internet Explorer 6 and below also
have a problem with !important
declarations when the same property of
the same element has another value
specified within the same code block,
without another !important
declaration. This should result in the
second value being overridden by the
first, but IE6 and lower do not honor
this.
It's a cheap PNG fix for IE6. Since IE6 won't recognize the !important tag, it will use the GIF background, while all other browsers will use the PNG.
Older versions of IE will use the last one.
These versions had problems with png transparency.
looks like he's attempting to support browsers that don't handle alpha .png's properly (cough IE6 cough)
An image set as the background of a DIV is displayed in IE, but not in Firefox.
CSS example:
div.something {
background:transparent url(../images/table_column.jpg) repeat scroll 0 0;
}
(The issue is described in many places but haven't seen any conclusive explanation or fix.)
Sorry this got huge, but it covers two possibilities that consistently happen to me.
Possibility 1
You may find the path to the CSS file isn't correct. For example:
Say I have the following file structure:
public/
css/
global.css
images/
background.jpg
something/
index.html
index.html
On public/index.html the following paths will include the CSS file:
#1: <link href="./css/global.css"
#2: <link href="/css/global.css"
#3: <link href="css/global.css"
However on public/something/index.html number 1 and 3 will fail. If you are using a directory structure like this (or an MVC structure e.g.: http://localhost/controller/action/params) use the second href type.
Firebug's Net monitor tab will tell you if the CSS file can't be included.
On the subject of paths remember that images are relative to the path of the CSS file. So:
url('./images/background.jpg') /* won't work */
url('../images/background.jpg') /* works: ../ == up one level */
Hover over the url() part of the background attribute in Firebug's CSS tab to check if the file's being loaded.
Possibility 2
It could be that the div has no content and thus has a 0 height. Make sure the div has at least a line of something in (e.g.: lorem ipsum delors secorum) or:
div.something {
display: block; /* for verification */
min-height: 50px;
min-width: 50px;
}
Check Firebug's layout tab (of the HTML tab) to check the div has a height/width.
Strangely enough, after smashing my head on the keyboard for hours, I added display:table; to the DIV's style and the background image magically appeared in FF.
It looks like a background-attachment issue. It needs to be set to fixed (not scroll) to work in FF.
See: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-position
Happend with me. The jpg does shows in IE but not in Firefox or Chrome. Here is the solution
Change the following css for the element where image is displayed. It can be span, div or any other element :
display:block
Old post but I just Had a similar problem images not showing up in Firefox turns out it was Ad-block add-on, had to change the names of my images
Try putting the image name in quotes, e.g.:
background-image: url('image.jpg');
I've had a similar issue. The reason is that firefox is sensitive for missing fields in your css. Chrome will (sometimes) auto complete missing field, thus the issue appears on your firefox browser.
You need to add a display type, because right now it is being translated to 0 height.
In my case:
.left-bg-image {
display: block; // add this line
background-image: url('../images/profile.jpeg');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
opacity: .6;
min-width: 100%;
min-height: 100vh;
}
Make sure that the image you are referring to is relative to the css file and not the html file.
try this.
background-color: transparent;
background-image: url("/path/to/image/file.jpg");
background-repeat: repeat;
background-position: top;
background-attachment: scroll;
Instead of using URLs relative to the page/stylesheet, a cross-browser solution is to give a relative URL starting with the application/domain root.
/* Relative to Stylesheet (Works in Firefox) */
background: url('../images/logo.gif');
/* Relative to Page (Works in IE, Chrome etc.) */
background: url('images/logo.gif');
/* Absolute path (Fine, unless you change domains)*/
background: url('http://www.webby.com/myproduct/images/factsheet.gif');
/* Domain Root-relative path (Works in Firefox, IE, Chrome and Opera) */
background: url('/myproduct/images/factsheet.gif');
FYI: As far as I'm concerned, there is no requirement to use quotes in CSS URLs, I've used them here 'cause it looks prettier.
I solved a similar problem by renaming the CSS class. MSIE allows CSS class IDs to begin with numbers; Firefox doesn't. I had created a class using the width of the image in pixels e.g. .1594px-01a
I actually knew it was non-standard syntax but since it was working fine in MSIE I had forgotten about it. After trying all the other stuff it finally dawned on me that it could be a simple as the naming, and as soon as I put a letter in front of the class, presto!
For me, it was a matter of the file-name being case-sensitive. I'm not sure if it was CSS or if it was my Ubuntu operating system, or if it was firefox, but the way that I finally got the background images to display was by referring to BlueGrad.jpg instead of bluegrad.jpg. The former of the two is how it was saved. I didn't think it would be case sensitive, but it was.
You could try this:
div.something {
background: transparent url(../images/table_column.jpg);
}
The other declarations are shorthand CSS properties, and I afaik they are not needed.
Do you have this online somewhere? I'd like to see if I can fiddle with it a bit. (locally)
More questions than answers I'm afraid, but they might help you get to the right answer:
Is it possible that you are collapsing the div in Firefox in some way (with some floats or similar)?
Is there any other content in the div to ensure it's large enough to display the image?
Have you installed Firebug and taken a look at the CSS definitions on the page?
Are you absolutely sure the image is a JPG file and not a PNG/Other file?
I'm wondering if IE is letting you get away with something other browsers are not.
Likewise, is the files case exactly as specified?
There's this HTML 'base' tag like in
<head>
<base href="http://example.com/some/bizarre/directory"/>
</head>
If this is present in your page, the image for the url is not relative to your current url, but to the given base url. I wouldn't know why IE displays it and Firefox doesn't, though.
The Webdeveloper Firefox extension provides the option to "Display broken images" - this may come in handy. Also, you might try "Live Http Headers" to see if/what image is requested and what the return code is.
I had a similar problem regarding the CSS background-image property in FF. It worked fine in IE but refused to work in FF ;) After reading a few posts I established that the issue was indeed that there was no content in the div except for a table (I was trying to make the background image adjust to the size of the broswer without collapsing or expanding and therefore used a much larger image in the background of the div in order to form a 'cropping' of sorts.) The solution for me it seems was to simply 'cheat' by placing an img tag that displayed a blank .png file that I then re-adjusted to the the correct height of the image with width set to 100%. This worked for my problem, and I hope it helps anyone else who is running into a similar problem. Probably not the best fix, but it's a fix ;)
The only other thing I can think of besides what has already been said is the way the picture was created. If you made/edited the image in Photoshop, make sure you save as Save For Web...
Sometimes if you use a JPG image for Photoshop without saving as a Web image, it may not appear in Firefox. I had that happen a few weeks ago where a graphic artist created a beautiful header for a mini site and it would NOT appear in FF!
Wait...
Try setting a width and height on the div to expand it. It may be a no-content issue in your div.
For those, who encounter the problem in FF, but not in Chrome:
You could mistakenly mix between different value types for the position.
For example,
background: transparent url("/my/image.png") right 60% no-repeat;
Will make this error. The fix could be:
background: transparent url("/my/image.png") 100% 60% no-repeat;
My mistake was to use '\' instead of '/'. Worked OK in IE, but not in other browsers.
I found two things that were causing this problem:
I was using a .tif file which Firefox did not seem to like - I changed to a .png file.
I added overflow:auto; to the CSS for the div - display:block; did not work for me.
It may look very weird, but this works for me >
#hwrap {
background-color: #d5b75a;
background: url("..//design/bg_header_daddy.png"), url("..//design/nasty_fabric.png");
background-position: 50% 50%, top left;
background-origin: border-box, border-box;
background-repeat: no-repeat, repeat;
}
Yes, a double dot and double slash ... ??!!?? ... I can't find anything on the internet that reports this strange behaviour.
[edit]
I've made a seperate post > https://stackoverflow.com/q/18342019/529802
(It doesn't seem like these are the exact circumstances as of the OP but the issue is somewhat related and I've found a workaround for that which I want to share)
I've had the same problem – background-image visible everywhere except in Firefox – and for me, the issue had to do with the fact that I'm working on a browser add-on.
I'm injecting a file style.css in the pageMod module with the contentStyleFile attribute. In it, there's the rule background-image: url(/img/editlist.png); where I'm referencing an image file external to the add-on. The problem here is that Firefox, unlike other browsers, misinterprets this external domain root as the add-on's internal root!
The css-file is a 1:1 port from the Chrome version of the extension/add-on, so I didn't want to mess around with it. That's why I've added an additional contentStyle rule in combination with a copy of that image in my resource folder. This rule simply overwrites the rule inside the css-file.
(In hindsight maybe even a more elegant method than before …)
Nobody mentioned background-origin so there you go :
background-image:url('dead.beef');
background-size: 100% 100%;
background-origin:border-box;
Solved the problem for me ; my background apparently was outside my div.
In my case it caused by "Strict" mode in FF Privacy & Security settings. After I have changed to "Standard" all background images had become visible.
This worked for me:
1) Click on the background image table.
2) Right click on the status bar at the bottom of the page.
3) Click Inline styles.
4) Click the Background styles tab.
5) If you see 'Transparent' in the colour title, that is the problem.
6) Click the colour box and select a colour (white is a good choice.)
7) The colour title should now read white.
8) Click OK.
9) Save the page.
10) Upload the page and overwrite the existing file.
11) Refresh the page and your background picture will display.
Note: Please ensure that you have uploaded your background picture jpeg. I forgot to upload the background jpeg once and spent ages trying to sort it before I realised my error.
Regards
Martin