|
CSS - Background Image Not Showing Up In Firefox, Working In I.e.
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> Similar Tutorialshello. 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%;
}
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? Hey all, am working on this: http://www.trshady.com/beyondfootball/ And have a problem with the 'wrapper' div ( which holds all the divs on the page ). In Internet explorer the background and border show up fine, but for some reason the wrapper background only is a large in height as the top banner .. Check it in both browsers so you know what I mean. Have made the wrapper background pink so it stands out. Thanks Here is the site I am working on: http://testlableon.ourcampusbookstore.com/index.php There are 3 navigation bars on the template. The first one (navbar) is the black one right under the header. The second one (userbar) is right under the navbar and it is supposed to be light gray (#eeeeee). The third one is the at the bottom of the page (footerbar) and is supposed to have a black (#000000) background. If you look at the site in ie, all the background colors are displayed correctly. If you look at the site in firefox or netscape though, the userbar and footerbar are not having their background colors displayed. Any ideas? For some reason no matter how I structure the code, I cannot get a background image to show up and I'm not sure why. Here is my current code:
Code: background: #cccccc url(/dir/bg.png) repeat-y; I've checked multiple sites just to verify that my code is correct, and it is. I've also tried the code another way: Code: background-color: #cccccc; background-image: url(/dir/bg.png); background-repeat: repeat-y; The image is uploaded to the correct directory as well. Any ideas? The only way i can get my backgroud image to show is to explicitly state my body elements within each document. If I put them in css file and refer each page to that css file, my background image does not work, but all the other elements in that css file do. Why? JOhn Hi everyone, I have a design I am working on a design, which has a image for a background, well the image does not show, I am not sure why, it just shows white text. Anyway here is my code. Code: #logo{
background-image: url('logo.png');
background-repeat: no-repeat;
}
#logo .text{
letter-spacing: -0.1em;
font-weight: bold;
font-size: 21px;
text-align: left;
color: #FFFFFF;
}
That does not work, however, this does. Code: <img src="logo.png" alt="Logo" /> Any suggestions? CSS back ground image isn't showing at all. Tried everything, googled, flipped through CSS books, moved the image into different directories, drank more tea and finally flipped Help! Site link : http://weary.me.uk/MT/ Code: * { margin:0; padding:0; }
BODY { background-color:#FFFFFF;
font-size:12px;
}
#header { background-color:#FFFFFF;
padding:0px; }
#left {
float:left;
width:18%;
padding:0%;
margin-left:1%;
margin-top:0%;
}
#right {
background-image: url(right_background.jpg);
background-repeat: no-repeat;
margin-right: 20px;
width: 220px;
border:1px solid #d2d7e4;
float:right;
width:20%;
margin-right:0%;
margin-top:0%;
padding:0px;
}
#center {
margin-right:30%;
margin-left:14%;
padding-left:10%;
background-color:#FFFFFF;
}
#footer { clear:both;
background-color:#FFFFFF;
padding:8px; }
img { border-width: 1px; border-color: transparent; } this is the code i used in my css sheet to invalidate the borders around the linked images. for some reason every other way i tried it was messing up my drop-down menu. now the only problem i have is that ie still shows the text-decoration. at the moment i haven't applied text-decoration none, but i have tried it and nothing worked. any other solutions? here's the page i'm applying it to:: page The CSS background-position: right; is not working in Firefox/Netscape, and just aligns the background image to the left. Know why? 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. 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! 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?? 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. 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. 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 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; } 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. |
|||||||