Open Bug 312944 Opened 19 years ago Updated 2 years ago

background: url("...") doesn't work in userContent.css

Categories

(Core :: CSS Parsing and Computation, defect)

Product:
Core
Component:
CSS Parsing and Computation
Platform:
x86
Linux
Type:
defect

Tracking

()

Status:
UNCONFIRMED

People

(Reporter: m.lalakisv, Unassigned)

Details

User-Agent: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.12) Gecko/20050922 Fedora/1.0.7-1.1.fc4 Firefox/1.0.7 Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.12) Gecko/20050922 Fedora/1.0.7-1.1.fc4 Firefox/1.0.7 i have the following userContent.css BODY { background: url("http://kde-look.org/content/pre1/30368-1.jpg"); background-color: #F9F0A5; background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat; } and the image doesn't appear in the background.... Reproducible: Always Expected Results: it should appear the image in the background....
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a1) Gecko/20051018 Firefox/1.6a1 ID:2005101816 This works for me. Could you please test this in a more recent build? http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla1.8/
Reporter, two things: can you test this in a more recent build, like 1.5 beta 2, and are you seeing anything in the JavaScript console (Tools > JavaScript) when you load up Firefox that looks related to this?
I tried the browser 1.5 Beta 2 the same problem, it changes the background's color but doesn't appear the image.... In JavaScript Console no errors appear....
I 've just tested and in the following browser, the same problem.... Mozilla 1.7.12 Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.12) Gecko/20050923 Fedora/1.7.12-1.5.1 I just want to put a transparent logo of Mozilla in all pages that don't have set background.....
I just tried in -safe-mode and neither now worked, it's very simple to see it just make a userContent.css file in directory chrome of firefox and you will see that no image is appeared... I just believe that the browser simply doesn't support the following feature "background: url("http://kde-look.org/content/pre1/30368-1.jpg");" in his file "userContent.css" the color is changed by the line "background-color: #F9F0A5;" but the image is not appeared.....
This works fine for me, and we certainly support backgrounds in userContent.css in general. Are you still seeing this problem in the Firefox 1.5 release candidate build?
I 've just checked and in Mozilla Firefox Candidate 1, the same problem.... if someone wants to test is very simple... the following "html" file works just fine: ------------temp.html--------------------- <html> <head> <style type="text/css"> body { background-image:url('http://kde-look.org/content/pre1/30368-1.jpg'); background-color: #F9F0A5; background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat; } </style> </head> <body> </body> </html> ---------------------------------------- the following userContent.css doesn't change the background of firefox: --------userContent.css----------------- BODY { background-image:url('http://kde-look.org/content/pre1/30368-1.jpg'); background-color: #F9F0A5; background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat; } ---------------------------------------- and generally I haven't find a way to put a background image in the showing pages in firefox or mozilla by using "userContent.css".
Using the styles in comment 8 works fine over here (put them in my userContent.css, and now all pages have that blue flower in the background).
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9a1) Gecko/20051107 Firefox/1.6a1 I could have sworn this worked before, but now I am seeing this bug (put that in userContent.css in my profile folder). Other stuff shows up like the background color, but I don't see the background-image. Guess it's on Linux only.
I was testing on Linux. What extensions, if any, do you have installed?
I tested this in a clean profile, double checked that I was editing the right file, made sure there were no errors in the CSS, even ran with a debug build to see if it would spit out any errors. Still nothing.
Summary: background: url("....") not works in userContent.css → background: url("...") doesn't work in userContent.css
Odd. I most definitely cannot reproduce...
Works for me just fine.
Maybe this has something to do with the "don't display external images" setting?
I'm sorry but where is that setting in Firefox in order to test it? "don't display external images"
Maybe you need to specify !important? :/
So I have to ask. For people who are seeing this bug: 1) What page are you testing on? I hope it's about:blank... 2) What does DOM inspector show in the way of style rules? 3) Does deleting the <body> node in DOM inspector and then undoing the deletion change anything?
1) I am testing it in the about:blank page, no image is displayed the only thing that is changed is the background color of the page... 2) DOM inspector doesn't show any style rules(we use userContent.css should show any rules?) even though that the background color is changed... 3) deleting <body> element and the undo the deleting didn't make any change....
I'm sorry I've used !important; in the userContent.css but I had the same results... I am sorry...
> 1) I am testing it in the about:blank page Ok... > 2) DOM inspector doesn't show any style rules It should. You're looking at the style rules that apply to the <body> node, right? It should show a rule from html.css and the rule from userContent.css. !important should make absolutely no difference; if it did, that would be a major issue.
I am so sorry you were right, I found the style rules for element <body> rules: body resource://gre/res/html.css 60 body ....../chrome/userContent.css 1 for first rule the properties: display block margin-top 8px margin-right-value 8px margin-bottom 8px margin-left-value 8px margin-left-ltr-source physical margin-left-rlt-source physical margin-right-ltr-source physical margin-right-rlt-source physical for second rule the properties: background-image url(http://kde-look.org/content/pre1/30368-1.jpg) background-color rgb(249,240,165) background-attachment fixed -x-background-x-position 100% -x-background-y-porition 100% background-repeat no-repeat I think that they are ok, aren't they?
Yeah, that looks right... So with that rule, in a current build (not 1.7.x branch), with all image loading enabled and with no extensions you're seeing a problem?
Exactly, it's happening what i have already describe, now I am using Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8) Gecko/20051025 Firefox/1.5
What happens if you use http://www.squarefree.com/bookmarklets/webdevel.html#test_styles instead of userContent.css to add the background?
I used the above link and everything was just fine: in "test styles" i just added: BODY { background: url("http://kde-look.org/content/pre1/30368-1.jpg"); background-color: #F9F0A5; background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat; } and immediately the flower appeared in the bottom-right corner in "edit styles" i replaced the body with the above specification and ecerything worked just fine again the flower appeared in the bottom-right corner... but in userContent.css it's not working.....
I have recreated and narrowed this behavior down in the wild. The behavior is occurring at http://raptor.slc.edu/~locks/index.php. There are two images being called from CSS on this page. One is called as the background to an h1 element. The other is called as the background to the body element. The h1 background appears correctly. The body background does not appear. I have narrowed the behavior down to one line of CSS code. The "working" example, with the single offending line commented out, can be seen at http://raptor.slc.edu/~locks/indextest.php Code of interest: #content, #bodytext { position: absolute; /* OFFENDING LINE */ left: 20%; top: 20%; z-index: 2; background: none; } Note that this div has nothing to do with either the body or the h1 elements! Drawing a border around it indicates that it is taking up its expected area (so it is not covering the bg image, in other words).
Apologies. Here is my user-agent, OS, etc info: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.9a1) Gecko/20051208 Firefox/1.6a1
> Note that this div has nothing to do with either the body Sure it does. The size of the body depends on the size of this div; if the div is positioned, it's out of flow so the body has 0 height and is right at the top of the viewport. That means the background is all above the top of the viewport (the no-repeat prevents it from being tiled below its "bottom right" anchor point).
Right. I just flew back here when I realized my error, but you beat me to it, Boris. My observation is well answered on 315512.
I am seeing the same problem that on my windows browser for this CSS: <html> <head> <style type="text/css"> body{ background-image:url('http://a111.g.akamai.net/f/111/2897/5m/www.cingular.com/images/backgroundPages.png'); background-repeat:repeat-y; } </style> </head> <body> </body> </html> It works on Firefox 1.5.0.3 on Linux and on XP on a different computer. This is my browser: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3 I can't get the Dom Inspector to load. Also, if I change this image to a different image it will work ( I tried the google logo and it worked). If I just try to go to the image url, Firefox will display the image.
I installed the nightly build of Firefox and it worked as desired. Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a1) Gecko/20060505 Minefield/3.0a1
Component: General → Style System (CSS)
Product: Firefox → Core
QA Contact: general → style-system
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.