Why would the background-image property cause a warning in Chrome?
I'm using jQuery's .css()
method to set the background image of a div
. The HTML in its final state is thu开发者_Python百科s:
<div id="front-page-bg" style="background-image: url(http://peterfcarlson.com/wp-content/uploads/2011/09/ert-011.jpg); display: block; "></div>
It works fine, however, I'm getting an error/warning in Chrome, where the background-image
property is struck through as though it's being ignored due to bad input, even though it is obviously being applied. Why would this be? Is it a problem with Chrome, or on my end?
I've tested the page in FF and IE, where it also seems to work without any errors or similar warnings. Any ideas about why this might be happening, and perhaps more importantly, should I ignore it, since the page seems to be working?
EDIT:
By inspecting more deeply (ignoring the first misleading 404 problem with image), seems that developer tools is ignoring the style definition; infact it applies a
not-parsed-ok
class which appends the warning icon, and an overloaded
class which causes the line-through.
The overloaded class is not appended if using background
in place of background-image
css definition.
But to discover the reasons of this behaviour would be necessary to analyze the developer tools source code.
My guess is that is a developer tools bug/incomplete feature.
This is my own test:
as you can see the image used is local, and have apix. And this is the resulting inspection:
Testing with a non existent css property, it shows the identical behaviour:
Your referenced image has some strange web server issues: infact it is returning a 404 error (maybe timeout?), then a redirect.
So you should check the image and the web server path, not your actual html code.
Even trying to put in actual html code, the error is the same:
This is the actual response of your web server, instead of your image:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body{height:100%;width:100%;margin:0;padding:0;}
body{overflow:hidden;background:#EDEDED url(http://peterfcarlson.com/wp-content/themes/comingsoon/pfc.png) center center no-repeat}
</style>
</head>
<body>
</body>
</html>
The problem is the DevTools/WebInspector bug. DevTools UI code just shows the data not always correctly generated by the back-end part of DevTools.
WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=70325
Chromium bug: http://code.google.com/p/chromium/issues/detail?id=100646
@IsaacLubow; Both Chrome & Safari
developer tool show that warning
error. Then question is
Why they show a warning ?
Answer:- Both Chrome & Safari developer tool
show warning when the property is not understand & recognized
by them.
for example:- write -moz-border-radius
in the css. Then check the page in chrome or safari. It's shows the same error which you have.
Then the second raised question is
But background-image property is recognized by all browsers !
Answer :- Yes; background-image
property is recognized by all browsers & the image is still shows in the website but the way we define the image is cause for that warning
/error
. In your example if you define background-image
property inside the html tag
instead of css
. It's shows the warning
/error
.
Check this example the first div images show an warning
but second div is not show any warning:
http://jsfiddle.net/sandeep/RDmRz/3/show
So; why that's happen ?
Because assigning attributes in html
tag is a Deprecated
method means
Those deprecated features can still be used, but should be used with caution because they are expected to be removed entirely sometime in the future. You should work to remove their use from your code.
Check what mozilla
said about that https://developer.mozilla.org/en/JavaScript/Reference/Deprecated_Features
https://developer.mozilla.org/en/DOM/HTMLImageElement
So; Developer tool
are updated as per the new html standards
& after introducing HTML4
some properties deprecated & outdated.
Check this for more http://fantasai.tripod.com/qref/HTML4/deprecated.html
http://www.createafreewebsite.net/html_tutorial/body_tag.html.
It's good to write background-image
in css
instead of html
tag.
http://peterfcarlson.com/wp-content/uploads/2011/09/ert-011.jpg
Your image is not coming up, instead we are getting a 404 error. I noticed that you are using a wordpress site from the structure of your image url, what we might be looking at is not your image but the image included inside your 404.php page inside your theme.
The html that is returned is the following:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body{height:100%;width:100%;margin:0;padding:0;}
body{overflow:hidden;background:#EDEDED url(http://peterfcarlson.com/wp-content/themes/comingsoon/pfc.png) center center no-repeat}
</style>
</head>
<body>
</body>
</html>
And this is the image being loaded instead: http://peterfcarlson.com/wp-content/themes/comingsoon/pfc.png
I'm quite sure that if you check your 404.php page from your theme that is what you will find. So you might want to re-upload the image and use the new url.
Comment
I know the question was answered but wanted to chime in with my results as to what i found. I noticed that, for some reason, when you specify a background-image
to an element it sometimes drops a warning in a webkit browser, which is the issue that the OP was having. But i noticed that the warning disappears when the background
shorthand is used instead.
Like so:
background:#ffffff url('image.png') repeat scroll right top;
I modified @sandeep's demo to show how it works:
Here is the full fiddle: http://jsfiddle.net/RDmRz/7/
And demo page: http://jsfiddle.net/RDmRz/7/show/
Check the page with the developers tools and switch between the divs to show how it is working for the "works" images and not working for the others.
A couple of screenshots:
Works
Doesn't Work
精彩评论