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

UNCONFIRMED
Unassigned

Status

()

UNCONFIRMED
13 years ago
10 years ago

People

(Reporter: m.lalakisv, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

13 years ago
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....

Comment 1

13 years ago
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/

Comment 2

13 years ago
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?
(Reporter)

Comment 3

13 years ago
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....
(Reporter)

Comment 4

13 years ago
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.....
(Reporter)

Comment 6

13 years ago
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?
(Reporter)

Comment 8

13 years ago
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).

Comment 10

13 years ago
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?

Comment 12

13 years ago
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?
(Reporter)

Comment 16

13 years ago
I'm sorry but where is that setting in Firefox in order to test it?

"don't display external images"

Comment 17

13 years ago
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?
(Reporter)

Comment 19

13 years ago
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....
(Reporter)

Comment 20

13 years ago
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.
(Reporter)

Comment 22

13 years ago
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?
(Reporter)

Comment 24

13 years ago
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

Comment 25

13 years ago
What happens if you use http://www.squarefree.com/bookmarklets/webdevel.html#test_styles instead of userContent.css to add the background?
(Reporter)

Comment 26

13 years ago
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.....

Comment 27

13 years ago
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).

Comment 28

13 years ago
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).

Comment 30

13 years ago
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.  

Comment 31

13 years ago
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.

Comment 32

13 years ago
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
You need to log in before you can comment on or make changes to this bug.