how do I get a fixed background?

**alwaysdrawing** · 04-06-2009 09:28 PM

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">

</style>
</head>
<body>
</body>
</html>

**purpleflame** · 04-06-2009 09:43 PM

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:

<style type="text/css">
body {
   background-image:url("IMAGEFILE/NameofImage.jpg");
   background-repeat:repeat-y;
   background-position:top center;
   background-attachment:fixed
}
</style>

Hope I Helped ^^

**mxl33t** · 04-07-2009 08:25 AM

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** · 04-08-2009 06:50 AM

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">

**alwaysdrawing** · 04-08-2009 03:16 PM

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** · 04-09-2009 06:50 AM

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.

**alwaysdrawing** · 04-10-2009 07:08 PM

Thanks, freecrm. It's working the way I want it now.

**freecrm** · 04-11-2009 04:25 PM

My pleasure!

Thread: how do I get a fixed background?

LinkBack

Thread Tools

Display

how do I get a fixed background?

Re: how do I get a fixed background?

Re: how do I get a fixed background?

Re: how do I get a fixed background?

Re: how do I get a fixed background?

Re: how do I get a fixed background?

Re: how do I get a fixed background?

Re: how do I get a fixed background?

Similar Threads

Relative paths or fixed paths?

Fixed background image

Background Checks Safety First - Free and Paid Background check

can anyone convert a CSS into an IPB skin for me?

My web designe

Posting Permissions