Background Images

**samo1215** · 04-17-2008, 02:53 PM

Sorry if this has been asked before but go easy on me because I'm new to this. I'm trying to add a simple background image to a section of my website.

I have created a <div> with an id="name" and then proceeded to put a brief text blurb in a paragraph. In the css I then put something to the effect of: #name {background-image: url(image1.jpeg);}.

I have doubled checked the image name and path and looked on several sites and can't see what I'm doing wrong. Does the image have to be a certain size? Does some other reference have to be made in the html? Any help would be greatly appreciated.

**LadynRed** · 04-17-2008, 03:07 PM

Quote:

Does the image have to be a certain size? Does some other reference have to be made in the html?

No, and no, although I suspect the JPEG may be the problem. Try renaming to JPG and see what happens.

Can we see all your code, that would also help.

**samo1215** · 04-17-2008, 04:41 PM

I'll try changing the file extension, otherwise when I get home from work I'll post the code. Question: how do I create one of those embedded boxes that everyone around here seems to use for their code? Thanks for the help.

**Gilligan** · 04-17-2008, 05:19 PM

Code:

one of these??

HTML Code:

or these??

PHP Code:


			
or these???

its bb code.

Click the

in your message, then put your code between [ CODE ] and [ /CODE ]

eg:

[ CODE ] Code here [ /CODE ]

**angele803** · 04-17-2008, 05:19 PM

Never mind! Gilligan replied right before me!

**MattCoops** · 04-17-2008, 08:40 PM

Now if one of you can make a background image appear in those code boxes that will be something.
I think LadynRed hit the nail on the head. If you change your code to .jpg rather than "jpeg", your image will show up. Let us know.

**samo1215** · 04-17-2008, 09:40 PM

Thanks for all the responses. I'm still having no luck so here is my code:

HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Test Website Version 1.0 ---> 
<head>
   
    <title>Test Website - Home</title>
    <link rel="shortcut icon" href="/favicon.ico" />
    <link href="styles/stylemain.css" type="text/css" rel="stylesheet" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
</head>

<body>

<div id="header">
<img src="images/header.gif" alt="Test Website Header Graphic" />
</div>

<div id="navigation">
<ul>
<li><a href="Home">Home</a></li>
<li><a href="About">About Us</a></li>
<li><a href="Properties">Properties</a></li>
<li><a href="Landgroup">Landgroup</a></li>
<li><a href="Foundation">Foundation</a></li>
<li><a href="Contact">Contact</a></li>
</ul>
</div>
 
<div id="content">
<p>test</p>
</div>

<div id="pageimage">
<img src="images/pageimage.jpg" alt="Building" />
</div>
 
 <div id="footer">
</div>

</body>

</html>

CSS:

Code:

/*
Test Website Main Style Sheet
Version 1.0
*/

body {
margin-left: 30px;
margin-right: 30px;
background-color: #fff;
padding: 0em;
}
    

#header {
background-color: red;
position: absolute;
padding: 0px;
width: 930px;
height: 75px;
}


#navigation ul
{
position: absolute;
margin-top: 75px;
background-color: #ccc;
margin-left: 0;
padding: 0em;
float: left;
color: white;
width: 930px;
font-size: 15px;
font-family: helvetica;
font-variant: small-caps;
}


#navigation li { 
display: inline;
}


#navigation ul li a
{
padding: 0.2em 1em;
background-color: #ccc;
text-decoration: none;
float: left;
color: black;
border-right: 0px solid white;
}


#navigation ul li a:hover
{
background-color: #999;
color: black;
}


#content
{
background-image: url(image.jpg);
background-color: navy;
position: absolute;
margin-top: 99px;
width: 200px;
height: 400px;
padding: 0em;
}


#pageimage
{
background-color: black;
position: absolute;
margin-top: 99px;
height: 400px;
width: 730px;
margin-left: 200px;
padding: 0em;
}


#footer {
background-color: navy;
position: absolute;
margin-top: 500px;
height: 50px;
width: 930px;
border-top: 25px solid #006
}

Also FYI, I tried to validate my html and it came back with 5 errors, none of which I understand. Anyway, thanks again for everyone's help.

**ForrestCroce** · 04-17-2008, 11:19 PM

I'm guessing image.jpg isn't in /styles ...? You can use relative paths in your stylesheet, but they start from the folder your CSS is in.

**170 Designs** · 04-18-2008, 07:21 AM

Try making the code:

background-image: url('image.jpg'); with single quotes

Matt

**CubicalPhil** · 04-18-2008, 07:28 AM

Did the single quote thing work. It has done for me before. How would you get the code boxes effect in an HTML page?

**LadynRed** · 04-18-2008, 11:14 AM

Ok, the first thing you have to change - get RID of all that position:absolute - it WILL cause you problems and it's not the best way to build a page. Learn to use the normal document flow and floats and only position when absolutely necessary (no pun intended).

There should not be any quotes in the url(image.jpg) properties and it doesn't make any difference.

I'm with Forrest, the path to the image may be wrong if your image isn't in the same directory as your stylesheet.

**Gilligan** · 04-18-2008, 11:29 AM

I looked at your code, and by the looks of it your images are in the 'images' folder.

Try changing
image.jpg to ../images/image.jpg

**samo1215** · 04-18-2008, 12:27 PM

You guys were right about the file path being incorrect. LadynRed, you brought up a great point about the layout. The problem is I don't know how to get things to display properly without all the absolutes. Before I put them in, things were bunching up in the corners, there were gaps between the navigation bar, header and page content and the footer was never at the bottom of the page. Any suggestions to fix this would be great. Thanks again for everyone's help, I have really learned a lot since joining this board.

**samo1215** · 04-18-2008, 06:55 PM

I have spent a little time reworking it but am still having some issues. Here is the code.

HTML

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Test Website Version 1.0 ---> 
<head>
   
    <title>Test Website - Home</title>
    <link rel="shortcut icon" href="/favicon.ico" />
    <link href="stylemain.css" type="text/css" rel="stylesheet" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    

</head>

<body>


<div id="header">
<img src="http://www.webmaster-talk.com/images/header.gif" alt="Test Website Header Graphic" />
</div>


<div id="navigation">
<ul>
<li><a href="Home">Home</a></li>
<li><a href="About">About Us</a></li>
<li><a href="Properties">Properties</a></li>
<li><a href="Landgroup">Landgroup</a></li>
<li><a href="Foundation">Foundation</a></li>
<li><a href="Contact">Contact</a></li>
</ul>
</div>
 

<div id="content">
<p>test</p>
</div>


<div id="pageimage">
</div>
 
 
<div id="footer">
</div>

</body>

</html>

CSS

Code:

/*
Test Website Main Style Sheet
Version 1.0
*/

body {
margin-left: 30px;
margin-right: 30px;
background-color: purple;
padding: 0em;
}
    

#header {
background-color: green;
padding: 0px;
margin: 0px;
width: 930px;
height: 75px;
float: left;
}


#navigation ul
{
margin: 0px;
background-color: #ccc;
padding: 0em;
margin-left: 0em;
float: left;
color: white;
width: 930px;
font-size: 15px;
font-family: helvetica;
font-variant: small-caps;
}


#navigation li { 
display: inline;
}


#navigation ul li a
{
padding: 0.2em 1em;
background-color: #green;
text-decoration: none;
float: left;
color: black;
border-right: 0px solid white;
}


#navigation ul li a:hover
{
background-color: #999;
color: black;
float: left;
}


#content
{
float: left;
background-color: navy;
width: 200px;
height: 400px;
padding: 0em;
}


#pageimage
{
float: left;
background-color: black;
height: 400px;
width: 730px;
}


#footer {
background-color: yellow;
height: 50px;
width: 930px;
border-top: 25px solid #006
float: left;
}

Right now in Firefox Version 2, the footer is not showing up. I suspect it is buried somewhere behind the page content or nav bar but can't see it. In Internet Explorer 6 I can see the footer but I have a gap between the bottom of my header image and the nav bar. The nav image is 930x75 and appears to display fine in Firefox. Lastly, if I wanted to, what is the best way to have the page extend to the top of the browser, thus eliminating the current gap that exists?

**samo1215** · 04-18-2008, 07:55 PM

Sorry for all the posts but one other thing I noticed is if I resize the browser window it completely screws up my page. All of sudden things start moving around which is not something I had to contend with when I used position absolutes. Any advice would really be appreciated.

**LadynRed** · 04-18-2008, 09:35 PM

Ok you did a complete 180 ! All you did was replace all the position:absolute with float:left .. wrong approach, sorry if I confused you.

I suggest you read up on float layouts:
http://css-discuss.incutio.com/?page=FloatLayouts

**samo1215** · 04-19-2008, 02:15 AM

LadynRed, I read the link you posted and have been doing my best to look some stuff up, but I'm still kinda unclear on the whole CSS positioning stuff.
What is wrong with position: absolute? Maybe it's just me but when I use floats, all of my pages end up doing really weird things in different resolutions or when the browser area is resized.

**LadynRed** · 04-19-2008, 10:32 AM

Quote:

What is wrong with position: absolute?

Lots of things. The main point is, you DO NOT NEED to position everything. USE the normal document flow to your advantage. When you make something position:absolute, you are sort of 'nailing' it in place and you take it OUT of the document flow, so that the absolutely positioned element does NOT interact with any other element on the page. When you position EVERYTHING, then NOTHING is in the flow, you have a batch of independently 'nailed' boxes. IE especially has issues with absolute positioning.

http://www.positioniseverything.net/posbugs.html

Quote:

Maybe it's just me but when I use floats, all of my pages end up doing really weird things in different resolutions or when the browser area is resized.

Because you're not using it correctly. Just like you should not position everything with absolute (or relative), it's not optimal to float everything either.

You need to learn more about the box model, floats, and positioning.
http://www.communitymx.com/content/a...989953B6F20B41
http://www.positioniseverything.net/
You'll find some examples here: http://www.bluerobot.com/web/layouts/

I don't have time this morning to play with your code to fix it, maybe this afternoon when I get back home.

**samo1215** · 04-21-2008, 04:13 PM

I think I'm starting to get it. One problem I am still having is with my navigation bar. I'm trying to create a horizontal navigation bar which changes when the cursor mouses over it. I have tried a bunch of different types and have been following some of the tutorials at:

http://css.maxdesign.com.au/index.htm

However, no matter what I do I can get the list to position properly on the page. If use position: absolute it gets all screwed up in different resolutions. With, floats and position relative I can't seem to eliminate gaps between the header and page content. What is the best approach to getting it to line up with the rest of my page?

Also, is it considered good practice to center the page with a <div> that contai