Adding A Backround Image [Archive] - Lissa Explains it All: Web Design Forums

View Full Version : Adding A Backround Image

Jenny_Jonesy

05-01-2005, 08:28 PM

Below are my codes, I have no idea how to position my backround Image and where to put it in my codes. I would like it to be positioned in the top left hand courner, and goes underneath my iFrame. I have no idea where to put the code in my CSS, or if I have put it in the wrong place, why isn't it working? Thanks xxx

<html>
<head>

<title>Your #1 website for James Bourne New Band</title>

<style type="text/css">

<TITLE>First Ever James Bourne New Band Website</TITLE>
<META NAME="description" CONTENT="This is the first ever Fansite for James Bournes's New Band, that he made after splitting from Busted.">
<META NAME="keywords" CONTENT="James Bourne New Band after Busted McFly Pop Punk Rock Charlie Matt Willis Fightstar">
<META NAME="author" CONTENT="Jennifer (Jonesy)">

</head>

<body>
<title>James Bourne's New Band</title>

body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}

#header {
margin: 20px;
padding: 10px;
height: 120px;
}
#left {
position: absolute;
left: 15px;
top: 160px;
width: 200px;
}
#center {
top: 0;
margin-left: 170px;
margin-right: 240px;
}
#right {
position: absolute;
right: 15px;
top: 160px;
width: 200px;
}
body
{
scrollbar-face-color : #AA3EE0;
scrollbar-highlight-color : #78BED3;
scrollbar-3dlight-color : #C800EB;
scrollbar-shadow-color : #999AD3;
scrollbar-darkshadow-color : #5D5CDC;
scrollbar-track-color : #6BB6EB;
scrollbar-arrow-color : #2A8ED5;
}
{ background: #000000;
background-image: url(http://uk.geocities.com/undesided_idiot/Image9.jpg);
background-repeat: no-repeat;
background-position: topI leftII;
background-attachment: fixed;}

A:link {text-decoration: none; color:#AF7681;}
A:visited {text-decoration: none; color:#1B83EB;}
A:hover {text-decoration: none; color:#A357CC;}
</style>

<body>
<div id="header">
<img style="position:absolute; top:0px; left:0px; width:974px;
height:120px" src="http://uk.geocities.com/undesided_idiot/header3.jpg">
</div>

<div id="left">

</div>

<div id="center"><IFRAME name="inlineframe" src="http://uk.geocities.com/undesided_idiot/second.html" width=570 height=1000 marginwidth=0 marginheight=0 frameborder=0 scrolling=auto></IFRAME></div>

<div id="right">

</div>

</body>
</html>

Monkey Bizzle

05-01-2005, 09:39 PM

Please don't be offended but your code is SERIOUSLY messed up... Here is your corrected code. I'm sure that if your index page is messed up then the rest of your pages are too. Basically, CSS goes in the <head> section with ONE set of <style> tags... You only need ONE body{} section so when you add more stuff for the body, just add it into the existing section... You are only supposed to have ONE set of <body> tags as well.

<html>
<head>
<META NAME="description" CONTENT="This is the first ever Fansite for James Bournes's New Band, that he made after splitting from Busted.">
<META NAME="keywords" CONTENT="James Bourne New Band after Busted McFly Pop Punk Rock Charlie Matt Willis Fightstar">
<META NAME="author" CONTENT="Jennifer (Jonesy)">

<title>Your #1 website for James Bourne New Band</title>
<TITLE>First Ever James Bourne New Band Website</TITLE>
<title>James Bourne's New Band</title>
pick one and stick with it!!

<style type="text/css">

body
{background-color: #000000;
background-image: url(http://uk.geocities.com/undesided_idiot/Image9.jpg);
background-repeat: no-repeat;
background-position: top left;
background-attachment: fixed;

scrollbar-face-color: #AA3EE0;
scrollbar-highlight-color: #78BED3;
scrollbar-3dlight-color: #C800EB;
scrollbar-shadow-color: #999AD3;
scrollbar-darkshadow-color: #5D5CDC;
scrollbar-track-color: #6BB6EB;
scrollbar-arrow-color: #2A8ED5;

margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;}

#header
{margin: 20px;
padding: 10px;
height: 120px;}

#left
{position: absolute;
left: 15px;
top: 160px;
width: 200px;}

#center
{position: absolute;
top: 0;
margin-left: 170px;
margin-right: 240px;}

#right
{position: absolute;
right: 15px;
top: 160px;
width: 200px;}

A:link {text-decoration: none; color:#AF7681;}
A:visited {text-decoration: none; color:#1B83EB;}
A:hover {text-decoration: none; color:#A357CC;}
</style>

</head>
<body>

<div id="header">
<img src="http://uk.geocities.com/undesided_idiot/header3.jpg" style="position:absolute; top:0px; left:0px; width:974px;
height:120px">
</div>

<div id="left">
these are empty so why are you using them unless you plan on adding to them later?
</div>

<div id="center"><IFRAME name="inlineframe" src="http://uk.geocities.com/undesided_idiot/second.html" width=570 height=1000 marginwidth=0 marginheight=0 frameborder=0 scrolling=auto></IFRAME></div>

<div id="right">
these are empty so why are you using them unless you plan on adding to them later?
</div>

</body>
</html>

Jenny_Jonesy

05-01-2005, 10:00 PM

Oh? I only thought the thing wrong was the backround image, everything else was working fine :confused:
Thank a lot though, I can see where I went wrong! xxx

Jenny_Jonesy

05-01-2005, 10:16 PM

I just tried to change the backround image to this insted, now the backround is all black??

{background-color: #000000;
background-image: url(http://uk.geocities.com/undesided_idiot/backround.jpg);
background-repeat: no-repeat;
background-position: top left;
background-attachment: scroll;

Monkey Bizzle

05-01-2005, 10:29 PM

Oh? I only thought the thing wrong was the backround image, everything else was working fine :confused:
just because it works doesn't mean it's right ;)

I looked at your page and your code still looks the same to me...

Just copy and paste everything that I posted minus my comments and then change the URL to whatever it's supposed to be and change the color to a different color than black.

Jenny_Jonesy

05-01-2005, 10:43 PM

haha good point!
I'm testing it out on here at the moment: http://uk.geocities.com/undesided_idiot/test.html

but whats jsut happened when i tried to change the backround image to the other url, and change the backround colour to a different one other than black, it just changes to that other colour? xx

lefty

05-01-2005, 11:23 PM

Your image doesn't appear because this link doesn't exist:
uk.geocities.com/undesided_idiot/backround.jpg

Change the extension to .JPG... it does make a different ;)

Jenny_Jonesy

05-02-2005, 12:04 AM

Legendary! Thanks soo much both of you!
xxxx