I am having a weird problem with the url of the background-image property in different browsers, for example my url is:
background: url("resources/images/icons/pdf.png") no-repeat;
In Google chrome doesn´t appears but in IE works.. but If I change the url by:
background: url("../images/icons/pdf.png") no-repeat;
In Chrome works but in IE not...
What am I doing wrong?
Chrome and Firefox supports relative paths in this tag but IE does not. IE is following the specs strictly. Try adding a forward slash
background: url("/resources/images/icons/pdf.png") no-repeat;
I found the solution,in the CSS property you can add two different url for example:
background-image: url("resources/images/icons/excel.png"), url("../images/icons/excel.png");
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)
I'm looking to use SVG versions of a company logo on a website. At present, all current versions of major browsers (IE, Safari, Chrome, Firefox, Opera) support SVG, so this doesn't seem crazy. However, old browsers are still out there, so I need to fall back to PNG support.
The obvious solution is to put the SVG content in an object tag like so (forgive the inline styles...):
<object data='logo.svg' style='height:3em' >
<img src='logo.png' style='height:3em' />
</object>
Which in theory should render the object if possible, or else render the img. However, Chrome doesn't like this and applies the height style to the object itself but not the SVG, so I end up with a little iframe-like box with scrollbars, showing a huge logo.
Another solution would be to use the PNG as the img source, and then swap it out at render time with the SVG source with javascript, if I think I'm running on a SVG-capable browser. This is not ideal because the PNG will still get downloaded, and I'm not confidant I can properly detect SVG support. Unfortunately, jQuery doesn't seem to have a SVG-detect feature.
Finally, since my website is deployed with ASP.NET, I could inspect the user agent string before serving the page, and specify the img source depending on whether I think it will support SVG. But this also has the potential problem that I am not confidant I can make the right call.
What is the preferred way of doing SVG for images?
This is an old question, but here is another solution:
Download a version of Modernizr that is trimmed down to just testing SVG (assuming that’s the only test you need).
Run the test. If it passes, put in the SVG. If it fails, put in the bitmap. Essentially:
if (!Modernizr.svg) {
$("#logo").css("background-image", "url(fallback.png)");
}
SVG is a perfect use case for Modernizr, because there is no simple native way to provide a fallback.
Note: The browser don't load both (png and svg) versions.
For the record: the only reason you would need a fallback for SVG these days if you have to support IE 8 and down, or older Android.
I wouldn't call it the preferred way, but if you want to pursue your second option this should detect SVG support (from Raphaël 1.5.2):
if(window.SVGAngle ||
document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1") {
// supports SVG
else {
// no SVG
}
Raphaël uses this to determine if it should render using VML (IE) or SVG (everyone else).
Out of curiosity, why SVG for your logo? If you already have a PNG version, this seems like a lot of work.
To solve your problem w/resizing SVGs in the object tag:
Add "preserveAspectRatio" and "viewBox" attributes to the svg tag. Open the file in a text editor and find the tag. in that tag, add the following attributes:
preserveAspectRatio="xMinYMin meet" viewBox="0 0 {width} {height}"
Replace {width} and {height} with some defaults for the viewBox. I use the values from the "width" and "height" attributes of the SVG tag. Save the SVG and it should now scale as expected.
See: How do I scale a stubborn SVG embedded with the <object> tag?
The problem w/SVGs in the object tag, though is that they swallow the clicks.
SVG as background-image w/PNG fallback: http://www.broken-links.com/2010/06/14/using-svg-in-backgrounds-with-png-fallback/
My favorite is using the img tag and an onerror handler to change the src tag to a PNG.
Another good resource: http://www.schepers.cc/svg/blendups/embedding.html
The only thing you need is CSS. First you declare the fallback image as a background-image. Then you can use multiple backgrounds to add the SVG.
IE8 and below will ignore the second background-image-declaration, because the lacking support of multiple backgrounds.
By the way, I'm using the img element here, because a logo is content, not layout. Using background-images might appear to be wrong in this context, but I disagree. You get the best of the worlds: SVG logo, fallback for
HTML:
<a href="/" class="site-logo">
<!-- base64 encoded 1x1 px big transparent gif -->
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="company logo">
</a>
CSS (using multiple background images):
caniuse: multiple backgrounds
PNG for IE <9, FF <3.6, Opera <10.5
SVG for all the others supporting SVG
Android 2.x won't have a PNG or SVG, due to these versions actually supporting multiple backgrounds, but not SVG
There is only one HTTP request made for browsers supporting SVG
.site-logo > img {
/* Dimensions of your image need to be set */
width: 32px;
height: 32px;
/* Fallback for <IE9 */
background-image: url(logo.png);
/* multiple backgrounds are ignored by <IE9 */
background-image: url(logo.svg), none;
}
CSS (using linear gradients):
caniuse: CSS gradients
PNG for IE <10, FF <3.6, Safari <4.0, Opera <11.1, Opera Mini, Opera Mobile <11.1
SVG for all the others supporting SVG (if vendor-prefixes are specified)
Ignoring the old gradient syntax for webkit makes Android 2.x use the PNG fallback
.site-logo > img {
/* Dimensions of your image need to be set */
width: 32px;
height: 32px;
background: transparent url(logo.png) center center no-repeat;
background-image: -webkit-linear-gradient(transparent, transparent), url(logo.svg);
background-image: linear-gradient(transparent, transparent), url(logo.svg);
}
Try svg-web they have a number of different ways of displaying svg images including flash with automatic fallback.
The best method I have found including SVG as an HTML element (with fallback) is this one:
<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100" style="width: 100px; height: 100px; vertical-align: top;">
<image xlink:href="image.svg" src="fallback.png" width="100%" height="100%"/>
</svg>
Pros:
Provides fallback in every device/browser I have tested (IE6-IE11, Android 2.0+, IOS3-7)
Only one image is loaded for each tested browser (except IE9-IE11)
Externally loaded images allows image to be cached
Cons:
Unable to use as scaleable (responsive) image in IE9-IE11 (see this question)
IE9-IE11 loads both images
IOS3-4 (Mobile Safari) has SVG support but displays the PNG (since it lacks inline SVG support)
SVG file must not have height / width attributes (unsure about this, but have read about it somewhere and in my tests my SVG did not have them anyway)
Does not validate
Please provide comments with additional pros / cons you can think of. I know for one SVG's can appear pixeled in some browsers, but I was unable to test zooming in since using browserstack for emulation.
Source: http://lynn.ru/examples/svg/en.html
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