AHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! I am designing a simple portfolio site and I can't get the image background to display on the main content div. Here is the URL: http://www.news-string.com/portfolio website/index.html Here is the CSS for the main div: div#main { margin-left:auto; margin-right:auto; width:700px; border:1px solid #FFF; background-image:url ('images/Untitled-1.png'); } What could i possibly be doing wrong??? This is driving me crazy!!! Help!!! lol.
bad url format http://www.news-string.com/portfolio website/index.html changed portfolio-website/index.html fix that first
That has absolutely nothing to do with the problem. I am not actively working on the site from the server, I only uploaded it so it can be viewed by anyone who wants to help me out.
Sorry, that was just a long shot guess. background-image:url ('images/Untitled-1.png'); Code (markup): Remove the space after "url", see if that works. If not, remove the '.
Unbelievable ... none of that works! Here is ALL of my CSS: div#header { margin-left:auto; margin-right:auto; width:700px; font-family:Georgia, "Times New Roman", Times, serif; font-size:24px; color:#FFF; } div#main { margin-left:auto; margin-right:auto; width:700px; border:1px solid #FFF; background-image:url (images/Untitled-1.png); } /* CSS Menu */ .underlinemenu{ font-weight: bold; width: 100%; } .underlinemenu ul{ padding: 6px 0 7px 0; /*6px should equal top padding of "ul li a" below, 7px should equal bottom padding + bottom border of "ul li a" below*/ margin: 0; text-align: left; //set value to "left", "center", or "right"*/ } .underlinemenu ul li{ display: inline; } .underlinemenu ul li a{ color: #FFF; padding: 6px 3px 4px 3px; /*top padding is 6px, bottom padding is 4px*/ margin-right: 20px; /*spacing between each menu link*/ text-decoration: none; border-bottom: 3px solid #FFF; /*bottom border is 3px*/ } .underlinemenu ul li a:hover, .underlinemenu ul li a.selected{ border-bottom-color: black; } /* End Menu */ HTML: All of my HTML: <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>My name here</title> <link rel="stylesheet" type="text/css" href="styles.css" > </head> <body bgcolor="#000000"> <div id="header"> <h1>This is my name</h1> </div> <div id="main"> <div class="underlinemenu"> <ul> <li><a href="http://www.dynamicdrive.com/">Home</a></li> <li><a href="http://www.dynamicdrive.com/style/">CSS Codes</a></li> <li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li> <li><a href="http://tools.dynamicdrive.com">Webmaster Tools</a></li> <li><a href="http://www.javascriptkit.com/">JavaScript</a></li> <li><a href="http://www.cssdrive.com">Gallery</a></li> </ul> </div> <p> this is a test</p> </div> <div id="footer"> </div> </body> </html> HTML: What could it possibly be??? p.s. this is after I removed the ' ' of course.
I can see the image when I add this into firebug: #main { background: url("images/Untitled-1.png") repeat scroll 0 0 transparent; } As gr33ny said, there was a space between "url" and "(".
NOT that you should be wasting a DIV around the UL, NOT that you should be using an alpha transparent .png, not that you should be using a fixed height .png as a background around your main content area... Just saying.
Actually I was just wanting to know what the image would look like on a web page background design i was considering. I had no intentions of using a fixed with PNG for my background ... I scraped this whole design altogether anyway.
Hi, You can used this coding div#main { margin-left:auto; margin-right:auto; Z-index:-1; width:700px; border:1px solid #FFF; background-image:url ('images/Untitled-1.png'); }