how do I get a fixed background?

A

alwaysdrawing

New Member
Messages
7
Reaction score
0
Points
0
I'm not very familiar with programming, but I want to fix a background image to the center of a webpage. I'm believe I have the right code, but it's still not working. Does anyone know my problem?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Ringtail</title>
<style type="text/css">
<!--
body {
background-color: #000000;
background-image: url(ringtail_bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
}
.style8 {font-family: Geneva, Arial, Helvetica, sans-serif; color: #A7080C; }
-->
</style>
</head>
<body>
</body>
</html>
 
purpleflame

purpleflame

New Member
Messages
17
Reaction score
0
Points
0
The code snippet I found to do this is very similar, but has quotes around the image file. Here is the one I found.
Code: 
[SIZE=1][COLOR=#0000c0]<style type=[/COLOR][/SIZE][SIZE=1]"text/css"[/SIZE][SIZE=1][COLOR=#0000c0]>
[/COLOR][/SIZE][SIZE=1]body {
   background-image:url("IMAGEFILE/NameofImage.jpg");
   background-repeat:repeat-y;
   background-position:top center;
   background-attachment:fixed
}
[/SIZE][SIZE=1][COLOR=#0000c0]</style>
[/COLOR][/SIZE]

Hope I Helped ^^
 
M

mxl33t

New Member
Messages
15
Reaction score
0
Points
0
Well, you can choose a wide background image and add
scroll top to background like :

background: url(bg.jpg) no-repeat scroll top ;

This will set the image to top and there will be no scroll bars.
 
freecrm

freecrm

New Member
Messages
629
Reaction score
0
Points
0
Just tried and tested the following - which works fine in both IE6 and FF.

Code: 
body {
	background: #fff url(../images/background.jpg) no-repeat fixed;
}

However, to centralise it, you will need a centralised container in addition to your <body> tag.

Code: 
body{}

#wrapper{
                position: relative;
	display: block;
	background: #fff url(../images/background.jpg) no-repeat fixed;
	width: 980px; /*or whatever width you want but the image above should be the same width*/
	margin-left: auto;
	margin-right: auto;
}

Body

Code: 
<body>
<div id="wrapper">

<!-- whatever content-->

</div>
</body>

Everything you want shown on the page would fit within this wrapper div.

Although it isn't a problem yet, you may also want to upgrade your doc type to

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
 
Last edited:
A

alwaysdrawing

New Member
Messages
7
Reaction score
0
Points
0
Thanks, I'll try this and see what happens. :)

Oh, btw, how do you make items in a table NOT move around when you resize the window?
 
freecrm

freecrm

New Member
Messages
629
Reaction score
0
Points
0
This is a very open-ended question and the anser depends entirely on your layout.

If your wrapper is a fixed size for instance and the image is the same width, it won't move.

If you have a smaller image embedded into a paragraph of text, this will move depending on the window size as the text wraps.

This is why using divisions is so important. As with a table layout, you can specify the location of each image and how it interacts with neighboring divs.
 
You must log in or register to reply here.
Top