|
CSS - Background-image Not Working
Hi, I have the following code:
Code:
<div id="nav">
<ul class="nav">
<li>
<a href="/webdesign/">web design</a>
</li>
<li>
|
<li>
<li>
<a href="/web programming/">web programming</a>
</li>
</ul>
</div>
My CSS looks like this :: Code: #nav {
z-index:999;
position:absolute;
margin-left:246px;
margin-top:105px;
background-image:url('images/common/navbar.png');
width: 777px;
text-transform: none;
text-decoration: none;
border-bottom-style: none;
}
.nav{
background-image:url('images/common/navbar.gif');
}
The background image isn't showing up in the div or the <ul> . I've been staring at this for a while and can't figure it out. Does anyone see what I'm doing wrong? I know my path to the images is correct. thanks -Sean Similar TutorialsI'm trying to set the background image of my header and for some reason its not being applied at all. CSS: Code: #header
{
background: url('../Images/Master/Header_Background.jpg');
color: White;
width: 1000px;
height: 150px;
position: relative;
}
The image is the same height and width of the header. I know the image is there because I can use the same url in an <img> tag and it shows up fine. The header is inside a container which I'm not setting any background attributes at all. I'm not setting any for the body either. I don't know why the image isn't showing. Thanks. Disregard pot I simply transposed li and a tag thanks anyway... Hi everyone, I just worked for two days to make my menu work on IE6. Now it works perfectly on IE6, but ironically it doesn't work on IE7 anymore. Basically, I have a two line menu bar. Each line consists of 9 squares, some are images that are links and some are just decoration images. Each line ("menu1" and "menu2") is an unordered list, with a background image of one of the menus. When one of the link squares is hovered, I want just this square to show a different place on the bottom of the background image. So what doesn't work? Only IE7 doesn't recognizes the link squares as links. No hover, No link. I can't navigate anywhere in IE7... Please help me...!! I've attached the relevant code, added comments and colored the parts that I think might cause the problem. html: Code: <div id="globalnav">
<ul id="menu1">
<li id="nav_home"><a href="../home/" title="Home">home</a></li>
<li id="nav_about"><a href="../about/main.htm" title="About us">about us</a></li>
<li id="nav_recruit"><a href="../recruit/" title="Recruit">recruit</a></li>
</ul>
<ul id="menu2">
<li id="nav_company" name="nav_company"><a href="../company/outline.htm" title="Company">company</a></li>
<li id="nav_clients" name="nav_clients"><a href="../clients/clients.htm" title="Clients">clients</a></li>
<li id="nav_contacts" name="nav_contacts"><a href="../contacts/" title="Contacts">recruit</a></li>
</ul>
</div>
css: Code: @charset "utf-8";
/* English Menu bar */
/* Box for the entire menu (two rows of ul) */
#globalnav {
height: 130px;
width: 675px;
}
/* Create box and put background image for each menu line */
#globalnav ul#menu1 {
height: 62px;
width: 675px;
background: transparent url(../images/menu1.jpg) top left no-repeat;
padding: 0;
position: relative;
margin: 0 0 5px 0;
}
#globalnav ul#menu2 {
height: 62px;
width: 675px;
background: transparent url(../images/menu2.jpg) top left no-repeat;
margin: 0;
padding: 0;
position: relative;
}
/* Boxes for each link square on the menu */
#globalnav li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
width: 75;
}
#globalnav li, #globalnav a {
height: 62;
display: block;
}
#globalnav a {
line-height: 62px;
text-decoration: none;
text-indent: -9999px;
display: block;
}
/* Define the area on the background image of the ul which coressponds to each link box */
#nav_home {left: 0; width: 75px;}
#nav_about {left: 225px; width: 75px;}
#nav_recruit {left: 525px; width: 75px;}
#nav_company {left: 150px; width: 75px;}
#nav_clients {left: 375px; width: 75px;}
#nav_contacts {left: 600px; width: 75px;}
/* Maybe the next part is unnecessary... */
#nav_home {background: transparent url(../images/menu1.jpg) 0 0 no-repeat;}
#nav_about {background: transparent url(../images/menu1.jpg) -225px 0 no-repeat;}
#nav_recruit {background: transparent url(../images/menu1.jpg) -525px 0 no-repeat;}
#nav_company {background: transparent url(../images/menu2.jpg) -150px 0 no-repeat;}
#nav_clients {background: transparent url(../images/menu2.jpg) -375px 0 no-repeat;}
#nav_contacts {background: transparent url(../images/menu2.jpg) -600px 0 no-repeat;}
/* Hovered menu items */
/* the background image in the link box should change to a diffetent part on the big image, which isn't normally shown - doesn't work in IE7 */
#nav_home a:hover {background: transparent url(../images/menu1.jpg) 0 -62px no-repeat;}
#nav_about a:hover {background: transparent url(../images/menu1.jpg) -225px -62px no-repeat;}
#nav_recruit a:hover {background: transparent url(../images/menu1.jpg) -525px -62px no-repeat;}
#nav_company a:hover {background: transparent url(../images/menu2.jpg) -150px -62px no-repeat;}
#nav_clients a:hover {background: transparent url(../images/menu2.jpg) -375px -62px no-repeat;}
#nav_contacts a:hover {background: transparent url(../images/menu2.jpg) -600px -62px no-repeat;}
/* Active menu items */
/* This part just makes the page we are currently in appear as hovered - works fine in all browsers */
body#home #nav_home {background: transparent url(../images/menu1.jpg) 0 -62px no-repeat;}
body#about #nav_about {background: transparent url(../images/menu1.jpg) -225px -62px no-repeat;}
body#recruit #nav_recruit {background: transparent url(../images/menu1.jpg) -525px -62px no-repeat;}
body#company #nav_company {background: transparent url(../images/menu2.jpg) -150px -62px no-repeat;}
body#clients #nav_clients {background: transparent url(../images/menu2.jpg) -375px -62px no-repeat;}
body#contacts #nav_contacts {background: transparent url(../images/menu2.jpg) -600px -62px no-repeat;}
By the way - before changing it, I had all the squares in a table. Worked on IE7, but not IE6. Oh and I'm using transitional DTD. is that ok? Am trying to solve an annoying IE problem: I have a menu which I has a background image which should appear when rolled over. Unfortunatly this works on Firefox but not IE. In internet explorer, nothing changes when the menu item is rolled over ( hovered ) .. any ideas? The code is: Code: #item, #item2, #item3, #item4 {
height:24px;
width:147px;
border:1px solid #dddddd;
padding-top:14px;
padding-left:15px;
}
#item:hover, #item2:hover, #item3:hover, #item4:hover { color:white; }
#item:hover { background-image:url(homeRollover.png); }
#item2:hover { background-image:url(aboutusRollover.png); }
#item3:hover { background-image:url(servicesRoll.png); }
#item4:hover { background-image:url(contactusRoll.png); }
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> 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? The layout I have going is a bit difficult to explain. Here's a diagram.. The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header. I hope this makes sense. What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though. Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts? Thanks in advance for any assistance/suggestions. In short, I'm trying to get this one image to tile down the page to the bottom, underneath a static background image. Basically, it's a 2pixel high image that's ready to tile vertically, just having a tough time getting it to work. You can clearly see the problem here, a gap at the bottom: http://www.groundedgroup.com/clients/NWR/ Here's the relevant css: http://www.groundedgroup.com/client...WR-GG/style.css I've googled and subsequently tried out some solutions, but no luck. Got any ideas? Thanks in advance. PS - Is there a way to keep the spiders from indexing my links above? The site is on a test server, so I don't want the url indexed. Hi, I have a question about setting up the Body background-image via a linked external stylesheet. I have a index.html file and a myStyle.css file. I want to setup the background to load an image file, test.JPG. When I embed the following in my index.html, I see the background show up: ** inside index.html file ** <BODY STYLE="background-image: url(test.JPG);"> blah </BODY> BUT, when I define my background in the externally linked myStyle.css file, the background does not load: ** inside myStyle.css file ** BODY { background-image: url(test.JPG); } ** inside index.html file ** <LINK REL="stylesheet" TYPE="text/css" HREF="myStyle.css"> <BODY> blah </BODY> </LINK> Please help. thanks! Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!) Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text. What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at: www.markmcm.co.uk/test/test.html The CSS is as as follows: Code:
/*
* Page Stylesheet
*/
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #eaeaea;
border:0; margin:0; padding:0;
height: 100%;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#container {
margin-left: auto;
margin-right: auto;
min-height: 100%;
width: 936px;
}
* html #container {
height: 100%;
}
#content {
float:left;
position: relative;
height: 528px;
width: 936px;
z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
position: absolute;
float: left;
display: block;
width: 312px;
height: 176px;
}
.miniscreen1 {
top: 0;
left: 0;
}
.miniscreen2 {
top:0;
left: 312px;
}
.miniscreen3 {
top: 0;
left: 624px;
}
.miniscreen4 {
left: 0;
top:176px;
}
.miniscreen5 {
left: 312px;
top:176px;
}
.miniscreen6 {
left: 624px;
top:176px;
}
.miniscreen7 {
left: 0;
top:352px;
}
.miniscreen8 {
left: 312px;
top:352px;
}
.miniscreen9 {
left: 624px;
top:352px;
}
.info {
height: 30px;
top:3px;
left: 40px;
width: 265px;
float: left;
position: absolute;
}
.infobar {
left:0px;
position: absolute;
top: 140px;
width: 312px;
height: 36px;
outline: none;
color:#000;
background: url("data/infobar.png") no-repeat 0 0;
z-index: 650;
}
.infobar:hover {
background-position: 0 -36px;
outline: none;
color:#fff;
}
#infobar span {
display: none;
outline: none;
}
.clip_title {
outline: none;
font-size: 85%;
font-weight: 700;
vertical-align: top;
text-align: left;
}
.clip_sub {
outline: none;
height: 13px;
font-size: 80%;
line-height: 13px;
font-weight: 700;
vertical-align: top;
text-align: left;
}
And the HTML is: 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"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page</title> <meta name="description" content=" " /> <meta name="keywords" content=" " /> <meta name="generator" content=" " /> <link rel="stylesheet" type="text/css" href="page.css" media="screen" /> </head> <body> <div id="container"> <div id="content"> <span class="miniscreen1"> <a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen2"> <a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen3"> <a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen4"> <a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen5"> <a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen6"> <a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen7"> <a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen8"> <a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen9"> <a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> </div> </div> </body> </html> There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!) Hi I am redesigning my blog and took it down completely. I want to place the day's text post on the day's photo post on top of the latter, while graying out the photo. Is that possible without using flash? I'm trying to do < td background="image" , i actually have the settings in a .css file, but it's not working for internet explorer. So, in my css file i have the background-image : image; and then in the html i have the <td=class so and so. but internet explorer makes the box smaller than it should be. Oh, and also i have designed the height: 108px; and the width in the style sheet.. i originally had it in the html, but either way, it still does this. rocktvs.t35.com <===here any suggestions? I'm trying to create a little background image for each image on this page. A kind of crappy looking polaroid type background image. It works fine in Firefox, but not in IE. Any ideas? http://www.rhizaowns.com/holly/index.php I am trying to put labels below images on my new site design. See: www.jwsuretybonds*com/jw09 I figured out how to get them vertically aligned, but I am having problems with the horizontal, as when I change the browser size, they move. Here is one of the examples: Code:
#homepage-bar h2.construction {
position:fixed;
top:225px;
left:505px;
}
I tried changing to position: absolute; I also tried to use percentages on the left: I know this is easy, but I can't find the fix after googling for 30 minutes. Help! Code: div.top {
border: 10px solid #CCCCCC;
border-bottom-width: 0px;
padding: 0px;
background-image: url(menutile.jpg);
}
The code above yields this . It is uneven with the normal image, though both are the same size. I simply want to tile the bg image to the border even with the normal menu images. What am I doing wrong? for some reason my background color won't show in firefox.. http://losemybreath.org/ take a look in IE and then in FF, I can't for the life of me figure out why it's not working.. any ideas? this is the css Code: body {
margin: 0;
padding: 0;
background: #ECF0CD;
text-align: center;
font: 12px Arial, Helvetica, sans-serif;
color: #666; }
#header {
margin-left: 25px;
width: 800px;
height: 524px;
background: url(http://www.losemybreath.org/images/greenlayout.jpg) no-repeat;
}
#center {
margin: auto;
width: 800px; }
#content {
width: 495px;
margin: auto;
text-align: left;
background: #BCD4B2; }
#blog {
float: left;
margin-left: 10px;
width: 290px;
text-align: justify;
display: inline;
background: #BCD4B2; }
#sidebar {
float: right;
margin-right: 10px;
width: 165px;
text-align: justify;
display: inline;
background: #BCD4B2;}
p {
font: 12px Arial, Helvetica, sans-serif;
color: #666;
margin-top: 0;
text-align: justify; }
h1 {
text-align: center;
background-color: #ECF0CD;
margin-bottom: 0;
padding-bottom: 0;
margin-top: 0;
padding-top: 0;
letter-spacing: 3px;
font-weight: bold;
font: 12px Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #77936C; }
ul,li {
list-style-type: none;
margin: 0;
padding: 0; }
a:link, a:visited {
color: #669257;
text-decoration: none; }
a:hover,a:active {
color: #666666;
background: #ECF0CD;
text-decoration: underline; }
hr {
width: 100%;
color: #ECF0CD; }
.right {
float: right; }
textarea, select, input {
color: #666666;
background: #ECF0CD;
border: 0px none;
margin: 0px;
padding: 2px;
font: 10px Arial, Helvetica, sans-serif; }
#question {
border: 1px solid #ECF0CD;
padding: 2px; }
Hey Guys! Trying to add a background position to a div and position it top right. Works in FF and IE7, but IE6 wants to put it top left. Code: background: $hexcolor url(/v2/PHP/img/$logo) no-repeat top right; www.RoundtopRiders.com/v2/videos/ Thank you in advance! I'm trying to make a div have a background image that only appears down the left hand side, I thought that this would be simple enough but I got no background image at all. Code: div.bar { color: #000000; background-color: #cccccc; background-image: url(gfx/fade.gif);
background-repeat: repeat-y;}
Code: <div class="bar">Writing and stuff</div> What am I doing wrong? If it helps, here is the whole css file and here is the page I'm trying to use it on. I searched google to see if there was a fix for this problem, and found a few hits, however, the solutions were not solutions. I tried them, yes the backgrounds of my clear .png's were still being filled with some random color. Is there anyone than can tell me how to make a .png's background clear in internet explorer? |
|||||||