/    Sign up×
Community /Pin to ProfileBookmark

BG image not showing up in FF or Opera

Copy linkTweet thisAlerts:
Jul 15.2006

I set a background image in my css file for my <body>. When I preview the page in IE6, it looks as it should. However, in FF 1.5+ or Opera 9 its gone.

Any fixes?

CSS:

[CODE]body
{
background-image:url(picture.jpg);
color:#FFFFFF;
background-position:right;
background-repeat:no-repeat;
background-attachment:fixed
}[/CODE]

to post a comment
CSS

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@NogDogJul 15.2006 — I don't see any problem with the snippet there. Unless it's a caching problem (the browser is using an older, cached version of the stylesheet), you may need to give us a link to the whole page (preferable) or else post the entire page and stylesheet to see if something else is the problem. And of course, be sure to run them through the validators: http://validator.w3.org/ and http://jigsaw.w3.org/css-validator/ .
Copy linkTweet thisAlerts:
@ajit29Jul 15.2006 — how can I display blinking text
Copy linkTweet thisAlerts:
@felgallJul 15.2006 — how can I display blinking text[/QUOTE]

Most browsers have disabled your ability to do that because blinking text has been the cause of too many people ending up in hospital and they don't want to be faced with massive lawsuits. You can set up blinking text with Javascript but make sure that you set it to not blink more than once pers second so as to avoid causing medical problems for epileptic visitors.
Copy linkTweet thisAlerts:
@WebJoelJul 15.2006 — You give nice calm answers even when the post is hijacked and the question almost appears retorical.

-Your skills... give them to me! ?
Copy linkTweet thisAlerts:
@IowajonesJul 18.2006 — Like CSS_dan I've got an image that shows up in IE but not in FF. I've posted the problem part of the page at: http://members.cox.net/isaiahh/ctest.html

This is the CSS statement:

#header {

z-index: 1;

width: 690px;

height: 70px;

margin: 0px 30px 15px 30px;

border: 0px solid white;

background: url('logo1.jpg') no-repeat fixed bottom left;

}

-Richard
Copy linkTweet thisAlerts:
@toicontienJul 18.2006 — You might need to change background-position: right; to something like background-position: top right; Those background statements can also be shortened up:

<i>
</i>background: transparent url(picture.jpg) no-repeat fixed top right;
color: #fff;

I've noticed with Gecko-based browsers (such as Firefox) that unless you specify the x and y-axis repeat values, the image doesn't show up. Not sure about Opera and KHTML-based browsers.
Copy linkTweet thisAlerts:
@ray326Jul 19.2006 — I believe you've got it in the wrong selector. Remove it from the #header and put it in

body {background: #666 url('logo1.jpg') no-repeat fixed bottom left;}
Copy linkTweet thisAlerts:
@CentauriJul 19.2006 — Remove "fixed" from your background declaration

Cheers

Graeme
Copy linkTweet thisAlerts:
@IowajonesJul 19.2006 — I took Graeme's advice and removed the word "fixed." Voila! It worked! now the logo appears in FF.

Thanks!

-Richard
×

Success!

Help @CSS_dan spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...