|
CSS - Css Background-image Not Appearing In Firefox
I have two bits of code that work in IE, but not in Firefox, and I have no idea why! They both use the background-image property
Here is the first: Code:
a.bio {
display: block;
width: 150px;
height: 26px;
background-image:url(C:\Apache 2.2\htdocs\_empaudio\test\images\btn_bio.jpg);
background-repeat: no-repeat;
}
a.bio:hover {
background-image:url(C:\Apache 2.2\htdocs\_empaudio\test\images\btn_bio_h.jpg);
}
Code: <a class="bio" href=""></a> And the second: Code:
td.window
{
width:670;
height:31px;
background-image:url(C:\Apache 2.2\htdocs\_empaudio\test\images\window_nav_repeat.jpg);
background-repeat:repeat-x;
padding:0px;
margin:0px;
border-spacing:0px;
border:0px;
}
Code: <td class="window"></td> Does ANYONE know why this is happening?? Similar TutorialsHello, if you visit http://tombraiders.net/katie/alison/index2.html you'll see the site I'm working on. (User: letme Pass: in) I want to put a background image within the container that all the body copy resides. I've tried editing the CSS file, located at http://www.tombraiders.net/katie/al...tyle_screen.css under "container3" however nothing ever appears. The image I'm trying to link right now is located under the img folder at the path img/image.jpg -- it's just a test image I want to use for now to see if I can get one working at all. Any help would be great! Not sure why it's not showing up. Thanks I must be missing the obvious? I have created an image that I want to tile vertically in the body of my document. So I have created a style for body in a linked css file with the following: body { background-image:url(image/background.gif); background-repeat: repeat-y; } In Design view in Dreamweaver, the image has the desired effect and tiles no problems, however when I go to preview it in the browser, the image does not appear. I have checked that the path of the image is correct in relation to the index.html page. Everything is saved on the desktop just now because I am experimenting with the technique, so in desktop I have the index.html and the image file (with the background.gif) in it. Oh and the css file is on the desktop too. I have also tried embeddeding the style rule in the head of the index.html and it still wont work. Would someone put me out of my misery please dmlocke Hi guys. This is my first post and I'm relatively new to CSS so I apologize if my post reeks of newcomer! I'm currently setting up my site with an external stylesheet. Everything has been coming along fine until I decided to setup a menu with css rollover image links. For some reason I simply cannot get the image to appear whatsoever. Everything else is working (such as position and size (I have temporarily given it a border for locational purposes)) within the code but the image just does not appear. I have looked this up for some time now and cannot come to a resolution. I have tried altering the code, changing paths, etc. etc. But I can't get it. Would really appreciate some help. Here is the rollover portion of my css: Code: #rollhome
{
display:block;
float:left;
margin: 0 auto;
width:122px;
height:50px;
text-decoration: none;
background-image:url("images/topmenu_home.png") no-repeat 0 0;
border:#000000 solid 2px;
text-indent:-99999px;
z-index:20;
}
#rollhome:link, #rollhome:visited
{
background-position: 0;
}
#rollhome:hover
{
background-position: 0 -50px;
}
And here is the rollover portion of my html: Code: <div id="rollovers"> <a id="rollhome" href="#"title="rollhome">Home</a>< /div> Any help would be most appreciated! I'm trying to get a repeating background image to show up in my Firefox browser but can't get it to work. Grateful if somebody can tell me what is wrong with this code? Code: <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="all">
#header {
background:#A31135 url(images/fill.gif) repeat-x fixed;
height:100px;
}
</style>
</head>
<body>
<div id="header">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
</body>
</html>
Many thanks. hello all, I am not very well experienced with CSS, so, please, bear with me. this question may sound stupid. I have a web page that is comprised of one main table. Except for the banner on top (1 column), the main row has two columns. These columns will comprise of: 1) left column: Menu 2) right column: page content. In the left column, the menu, I would like to have a background image sitting behind the menu. I have attempted to use CSS to put an image behind the menu: Code: .menu_back {background: url('Pics/Web/menu_background.jpg') no-repeat #ffffff;}
And my html looks like this: Code: <table width = "100%" class = "menu_back"> This does not work. After scouring the web without any real success , I humbly ask for ur help. I am designing for Firefox hoping it will work fine under IE. Thanking u in advance. hello. this has us stumped. here is the page: http://www.praxishosting.com/dev/csstest/testindex.htm it looks fine in IE, but in firefox, the div tag containing the background image does not appear to be expanding as the content grows. thus in firefox, you cannot see the background image in the bottom left hand cell (the only place it shows through). any suggestions? the style code for the background container is rather simple: Code:
#container {
width: 750px;
background: url(../media/bkgrd.gif) repeat fixed center top;
margin-right: auto;
margin-left: auto;
height: 100%;
}
Hi there, First time posting here so dont bite my head off! First up allow me to say, that i've done a search for previous posts and although i found topics similiar to what im asking none of the answers within helped me. Second, i've run my CSS and XHTML through the validation service over at w3c. - XHTML transitional - is valid on all pages apart from the main page this is due to me running cutenews on that page and the markup isnt valid. - CSS is valid. Okay to business, im hoping someone out there can help me, i've recently just updated my website with a new layout. It works perfectly in IE-6 but not in firefox, or any other browser for that matter (i used browsercam). I have issues with the background images not displaying as they should do. And not only that, my flash animation at the top of the page isnt displaying in FF either! Heres a link to my website And heres a link to the CSS file someone help please! Hello, I was wondering if anyone could help me get this background image to show up in firefox. It shows up in IE. It's the first #header image. I included the other code in case something is conflicting. *edit... nvm. Hey everyone, I'm redesigning a site and I'm running into some problems in firefox with the placement of the header-background image. The problem is that firefox places the image about 15 pixels below the intended area. When I add a border of 1 pixel to the header div firefox places the image correctly. I don't have this problem when viewing the site in IE. I've coded the following XHTML and css: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>ParaCentrumEeldeHoogeveen</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="Content-Language" content="nl" />
<link rel="stylesheet" href="css/layout.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
</div>
</div>
</body>
</html>
And the css file: Code: html {
padding: 0px;
margin: 0px;
}
body {
background: #3a60db url('../gfx/background.jpg') repeat-x;
font-family: arial, "lucida console", sans-serif;
font-size: 12px;
color: #000000;
text-align: center;
margin: 0px;
margin-top: 0px;
padding: 0px;
}
#container {
border: 0px solid #ff0000;
width: 760px;
margin: 0px auto;
padding: 0px;
text-align: left;
}
#header {
background: url('../gfx/header.jpg') no-repeat;
height: 238px;
width: 760px;
padding: 0px;
margin: 0px;
}
Screenshot of the problem Does anybody know what the problem is? Thanks in advance. Grtz. Arjen I have a problem that I have never seen before. I am using css to set the background properties of the body tag. Works just fine in IE but no background at all shows up in Firefox. css code for the body tag is: body { background-color: #0d005e; background-image: url('images/bgmain.jpg'); background-repeat: repeat-x; } Any thoughts? Hi, okay I am working on a website for a friend, and it is peak-performance.biz I want the background image to fill up the page and be unscrollable. I made it work and look very good in chrome but it only takes up half the page in firefox. I was wondering if anyone have any ideas how to fix this. Thanks for your advice in advance. I have used html{ background-color:#000000; background-image:url(images/background.jpg); background-repeat:no-repeat; background-size:1300px; height:1000px; background-attachment:fixed; } and html{ background-color:#000000; background-image:url(images/background.jpg); background-repeat:no-repeat; background-size:100%; background-attachment:fixed; } Hi, has anyone ever had a problem with firefox only (not IE). that when you shift your background image, the divs on top shift with it? I dont want them to shift down but they do when I look at it in firefox its shifted, in IE its not. I am sorry this is my first posting. if anybody can help me, thanks alot. Here is my code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>
<style type="text/css">
#outer {
width: 820px;
height:800px;
margin: auto;
background: url(images/background2.png);
background-repeat: no repeat;
background-position: center; }
</style>
<title>test</title>
</head>
<body>
<div id="outer">
<div style="backgroundimage:url(images/header2.png); background-repeat: no repeat; background-position: center; width:819px;
height:120px;
margin-top:20px;">
</div>
<div style="background-image:url(images/header2.png); background-repeat: no repeat;
background-position: center;
margin-top:20px;
width:819px;
height:120px; ">
</div>
</div>
</div>
</body>
</html>
I'm trying to go through examples out there and get a handle on stretching background images with an opacity text box overlaying the image. I have it working in IE7, IE6, and Firefox 2.0.0.16 with one weird little thing. In Firefox only, if I have the page designated as the home page or I hit refresh, the background image doesn't appear - just a completely white page. If I have it as a link or highlight the url itself and hit enter, the background appears. Any ideas? It's pretty hideous - it's a test, but here's the url: http://www.mahec.net/default3.aspx Here's the code: Code: <%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; color: #fff;}
a { color: #fff; }
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {
position:relative;
width:90%;
padding:25px 25px 25px 25px;
z-index:1;
background-color:#ffffff;
color:#000000;
opacity:0.6;
filter: alpha(opacity=60);
}
</style>
<!--[if IE 6]>
<style type="text/css">
/* some css fixes for IE browsers */
html {overflow-y:hidden;}
body {overflow-y:auto;}
#bg {position:absolute; z-index:-1;}
#content {position:static;}
</style>
<![endif]-->
</head>
<body>
<form id="form1" runat="server">
<div>
<img src="http://flounder2.mahec.net/images/rhodo.jpg" alt="my 2 cats" id="bg" />
<div id="content">
<h1>Faking a Stretched Background Image</h1>
<h2>Across the Whole Page</h2>
<p><a href="/od/css3/f/blfaqbgsize.htm">Learn how to stretch a background image.</a></p>
<p>paragraph text</p>
</div>
</form>
</body>
</html>
Hi, I want to put a background image for a div section of my site. It works fine in i.e. but i can't get it to show up in firefox. Does anyone know why? CSS: Code:
body {
font-family : Arial, Helvetica, sans-serif;
font-size: 16px;
background: #330000;
text-align:center;
margin: 0;
padding: 0
}
#mainarea {
background-image:
url('alexandertea_bg_v03.jpg');
width: 719px;
height: 650px;
}
HTML: Code: <body> <div class="topbar"> <img src="images/lemonreghome.gif" id="home"> <img src="images/lemonregstory.gif" id="story"> <img src="images/lemonregwheretobuy.gif" id="wheretobuy"> </div> <div id="mainarea"> Hellow </div> </body> Okay the backgroundimage "content-header" does not display in firefox for the <div id="contentWrapper"> tag. In internet explorer it displays. Not sure what the hell is going on with it. I hate css http://www.mgan.net/work/10-06-04/layout1.html There is the link, I have my styles in the header section of the html file. Hi all, I use an background image for a menu. Code:
#menu a, #menu a:hover {
height: 20px;
width: 150px;
text-decoration: none;
padding-left: 40px;
padding-top: 3px;
padding-right: 3px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
margin-bottom: 10px;
background-position: 0px;
vertical-align: middle;
}
#menu a {
color: #9E007F;
background-image: url(../imgs/nav/subNav/subNav_bg.gif);
background-repeat: no-repeat;
}
#menu a:hover {
color: #FFF;
background-image: url(../imgs/nav/subNav/subNav_bg_over.gif);
background-repeat: no-repeat;
}
It works fine in IE but not in firefox. Somehow the background image is not completely shown. It stops after the last letter. Any suggestions?? Grtz, Hi I'm putting a page together with a vertical tiling background. It's ok in Safari, but the tiling image seems to stop before the bottom of the page. It should be held by the #container div, but the developer toolbar shows this ending way before the end of the page - even though I have contained content still appearing down to the page edge. The site is at bringmyshuttle.com As far as I can see my code makes sense... Any ideas? Thanks I have just started writing a page and the first thing I did was establish a body background color and image. It works in IE but not FF. Can someone please give me a clue what is wrong. I have searched all the CSS books and the internet but I cannot find an answer. Thanks in advance. The URL is http://www.childrens-stories.me.uk/ I am trying to set background of my divs with: background:#FFFFFF url(images/nheadlines_bg.gif) top no-repeat; It works fine with IE but at Firefox there is only a white background. You can check this out at: http://www.pearl.ru/isdunyasi Here is my code: Code:
body {
background-color: yellow;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px; font-family: sans-serif;
}
None of the attributes such as background color, margins, border, padding are showing up when I test it out. Can someone help me? |
|||||||