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)

x86
Linux
defect

Tracking

()

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.