Background Problem

Your background image is typed incorrectly.

It should read something like this.

background-image: url('http://www.smootherthanbutter.com/water.bmp');

That should fix that problem, at least.

Actually, I had it typed correcty in my CSS, but it still doesn't work. You can see what it looks like at www.smootherthanbutter.com . Nothing shows up.

Where exactly do you want this background to be placed?

And for some reason I can't seem to View Source on your page. Could you upload your CSS and HTML for the page?

Basically I just want the background placed so that the water image is in the background when the user scrolls, the content moves while the water background remains stationary. Here's the CSS and html

CSS:
----------------------------------
body {
margin: 0 auto;
padding: 0;
background-image: url('http://www.smootherthanbutter.com/water.bmp');
background-attachment: fixed;
background-position: bottom center;
background-repeat: no-repeat;
}

h1, h2, h3 {
font-family: georgia, times new roman, times, serif;
letter-spacing: 0.09em;
}

h4 {
font-family: lucida grande, verdana, arial, helvetica, sans-serif;
margin-bottom: 4px;
}

p {
font-family: georgia, times new roman, times, serif;
}

.center {
text-align: center;
}

blockquote {
font-family: trebuchet ms, verdana, arial, helvetica, sans-serif;
}

ul {
list-style: square;
margin-top: 3px;
margin-bottom: 3px;
margin-left: 1em;
padding-left: 1em;
}

li {
font-size: 100%;
font-family: georgia, times new roman, times, serif;
}

img {
margin: 0;
padding: 0;
border: 0;
}

a:link { background-color: transparent; text-decoration: none; color: #663300; }
a:hover { background-color: #663300; text-decoration: none; color: #fff; }
a:visited { background-color: transparent; text-decoration: none; color: #663300; }

#wrapper {
margin: 0px auto;
padding-bottom: 0px;
width: 740px;
border-top: 7px solid #9DB7A7;
border-right: 1px solid #aaa;
border-bottom: 10px solid #9DB7A7;
border-left: 1px solid #aaa;
background: #eee;
color: #333;
}

#header {
margin-bottom: 10px;
padding: 5px 10px 5px 20px;
border-bottom: 1px solid #ccc;
background: #19144B;
color: #003300;
font-variant: small-caps;
}

#blogtitle {
float: left;
margin: 0;
padding: 0;
width: 350px;
text-align: left;
}

#blogtitle h1 {
margin: 0;
padding: 0;
font-size: 160%;
letter-spacing: 0.1em;
text-align: left;
}

#content {
float: left;
margin-top: -11px;
margin-bottom: -10px;
padding: 0 10px;
background: #67706A;
}

#blog {
float: left;
margin-top: 10px;
margin-right: 5px;
padding: 10px;
border: 1px solid #ccc;
width: 496px;
background: #D7D3BE;
color: #333;
font-size: 75%;
text-align: left;
}

#sidebar {
float: right;
margin-left: 5px;
margin-top: 10px;
padding: 10px;
border: 1px solid #ccc;
width: 170px;
background: #F0E3C8;
color: #333;
text-align: left;
font-size: 75%;
}

#footer {
margin: 0;
padding: 5px 10px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background: #fff;
color: #333;
font-size: 70%;
font-variant: small-caps;
letter-spacing: 0.09em;
}

.date {
text-align: right;
margin-bottom: -18px;
font-size: 100%;
background: transparent;
color: #000;
}

.title {
font-size: 130%;
font-weight: bold;
padding-left: 5px;
background: transparent;
color: #336600;
border-top:1px solid #333;
}

.posted {
margin-bottom: 30px;
font: 10px lucida grande, verdana, arial, helvetica, sans-serif;
background: transparent;
color: #666;
}

.sidetitle {
margin-bottom: -17px;
margin: 110px 10;
font-size: 115%;
letter-spacing: 0.09em;
font-weight: normal;
background: transparent;
color: #666600;
}

.spacer {
clear: both;
}

.paginate {
font-family: Verdana, Geneva, Tahoma, Trebuchet MS, Arial, Sans-serif;
font-size: 12px;
font-weight: normal;
letter-spacing: .1em;
padding: 10px 6px 10px 4px;
margin: 0;
background-color: transparent;
}

.pagecount {
font-family: Verdana, Geneva, Tahoma, Trebuchet MS, Arial, Sans-serif;
font-size: 10px;
color: #666;
font-weight: normal;
background-color: transparent;
}

.calendarBG {
background-color: #000;
}

.calendarBlank {
background-color: #9DB7A7;
}

.calendarHeader {
font-weight: bold;
color: #fff;
text-align: center;
background-color: #000;
}

.calendarMonthLinks {
font-family: Arial, Trebuchet MS, Tahoma, Verdana, Sans-serif;
font-size: 11px;
font-weight: bold;
letter-spacing: .1em;
text-decoration: none;
color: #fff;
background-color: transparent;
}

.calendarMonthLinks a {
color: #fff;
text-decoration: none;
background-color: transparent;
}

.calendarMonthLinks a:visited {
color: #fff;
text-decoration: none;
background-color: transparent;
}

.calendarMonthLinks a:hover {
color: #ccc;
text-decoration: underline;
background-color: transparent;
}

.calendarDayHeading {
font-weight: bold;
font-size: 11px;
color: #fff;
background-color: #663300;
text-align: center;
vertical-align: middle;
}

.calendarToday {
font-family: Arial, Trebuchet MS, Tahoma, Verdana, Sans-serif;
font-size: 12px;
font-weight: bold;
letter-spacing: .1em;
text-decoration: none;
text-align: center;
vertical-align: middle;
color: #000;
background-color: #ccc;
}

.calendarCell {
font-family: Arial, Trebuchet MS, Tahoma, Verdana, Sans-serif;
font-size: 12px;
font-weight: bold;
letter-spacing: .1em;
text-decoration: none;
text-align: center;
vertical-align: middle;
color: #666;
background-color: #fff;
}

.calendarCell a {
color: #000;
text-decoration: underline;
background-color: transparent;
}

.calendarCell a:visited {
color: #000;
text-decoration: underline;
background-color: transparent;
}

.calendarCell a:hover {
color: #fff;
text-decoration: none;
background-color: transparent;
}

.input {
border-top: 1px solid #999999;
border-left: 1px solid #999999;
background-color: #fff;
color: #000;
font-family: Verdana, Geneva, Tahoma, Trebuchet MS, Arial, Sans-serif;
font-size: 11px;
height: 1.6em;
padding: .3em 0 0 2px;
margin-top: 6px;
margin-bottom: 3px;
}

.textarea {
border-top: 1px solid #999999;
border-left: 1px solid #999999;
background-color: #fff;
color: #000;
font-family: Verdana, Geneva, Tahoma, Trebuchet MS, Arial, Sans-serif;
font-size: 11px;
margin-top: 3px;
margin-bottom: 3px;
}

.checkbox {
background-color: transparent;
margin: 3px;
padding: 0;
border: 0;
}

.submit {
background-color: #fff;
font-family: Arial, Verdana, Sans-serif;
font-size: 10px;
font-weight: normal;
letter-spacing: .1em;
padding: 1px 3px 1px 3px;
margin-top: 6px;
margin-bottom: 4px;
text-transform: uppercase;
color: #000;
}

HTML:
-----------------------------
<!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">

<head>
<center><img src="http://www.smootherthanbutter.com/newsmooth7.jpg" width="742" height="180" alt="logo"/></center>
<meta http-equiv="Content-Type" content="text/html; charset={charset}" />
<title>{exp:weblog:weblog_name weblog="weblog1"}</title>
<link rel='stylesheet' type='text/css' media='all' href='{stylesheet=weblog/weblog_css}' />
<style type='text/css' media='screen'>@import "{stylesheet=weblog/weblog_css}";</style>
</head>

<body>
<div id="wrapper">
<div id="header">

</div>

<div><div class="spacer"></div>

</div>

<div><div class="spacer"></div>

<div id="content">

<div id="blog">

{exp:weblog:category_heading}
<h1>{category_name}</h1>
{/exp:weblog:category_heading}

{exp:weblog:entries weblog="weblog1" orderby="date" sort="desc" limit="5"}

{date_heading}
<h3 class="date">{entry_date format=' %l, %F %d, %Y '}</h3>
{/date_heading}

<h2 class="title">{title}</h2>
{summary}

{body}

<div class="posted">Posted by <a href="{profile_path=member/index}">{author}</a> on {entry_date format='%m/%d'} at {entry_date format='%h:%i %A'}

<br />

{categories}
<a href="{path=SITE_INDEX}">{category_name}</a> •
{/categories}

{if allow_comments}
({comment_total}) <a href="{comment_path="weblog/comments"}">Comments</a> •
{/if}

{if allow_trackbacks}
({trackback_total}) <a href="{trackback_path="weblog/trackbacks"}">Trackbacks</a> •
{/if}
<a href="{title_permalink=weblog/index}">Permalink</a>

</div>

{paginate}

<div class="paginate">

<span class="pagecount">Page {current_page} of {total_pages} pages</span> {pagination_links}

</div>

{/paginate}

{/exp:weblog:entries}

</div>

<div id="sidebar">

<p>Members:

<br />

{if logged_in}
<a href="{path=member/profile}">Your Account</a> | <a href="{path=LOGOUT}">Logout</a>
{/if}

{if logged_out}
<a href="{path=member/login}">Login</a> | <a href="{path=member/register}">Register</a>
{/if}

| <a href="{path=member/memberlist}">Member List</a>

</p>

<center>
<h2 class="sidetitle"></h2>
<p>
<a href=http://krezdorn.doesntexist.com/>Krez's Pad</a><br />
<a href=http://digital-nexus.org/>Digital-Nexus</a><br />
<a href=http://lilium-tigrinum.com/>Lilium-Tigrinum</a><br />
<a href=http://www.e-piojo.org/>E-Piojo</a><br />
<a href=http://nino.dnsalias.org/>Nino's Joint</a><br />
<a href=http://www.gtoal.com/~bwp/>Mysterian's Place</a><br />
<a href=http://www.slantpoint.com/>Slant/Point</a><br />
<a href=http://dacia.sytes.net:8000/>Dacia's Digs</a><br />
{exp:weblog:categories weblog="weblog1" style="nested"}
<a href="{path=weblog/index}">{category_name}</a>
{/exp:weblog:categories}
</p>

<center>
<h2 class="sidetitle"></h2>
<p><br/>

<h2 class="sidetitle"></h2>
<br/>
{exp:weblog:month_links weblog="weblog1"}
<a href="{path=weblog/index}">{month} {year}</a>
{/exp:weblog:month_links}
<a href="{path=weblog/archives}">Complete Archives</a><br/>
<a href="{path=weblog/categories}">Category Archives</a>

<h2 class="sidetitle"></h2>
<ul><br/>
{exp:weblog:entries orderby="date" sort="desc" limit="15" weblog="weblog1" dynamic="off"}
<a href="{title_permalink=weblog/index}">{title}</a>
{/exp:weblog:entries}
</ul>

<center>
{exp:search:simple_form search_in="everywhere"}
<h2 class="sidetitle"></h2>
<p>
<input type="text" name="keywords" value="" class="input" size="18" maxlength="100" />
<br />
<a href="{path=search/index}">Advanced Search</a>
</p>

<p><input type="submit" value="submit" class="submit" /></p>

{/exp:search:simple_form}
</center>

<h2 class="sidetitle"></h2>
<ul><br/>
<a href="{path=weblog/rss_1.0}">RSS 1.0</a><br/>
<a href="{path=weblog/rss_2.0}">RSS 2.0</a><br/>
<a href="{path=weblog/rss_atom}">Atom</a><br/>
</ul>
</center>

</body>
</html>

Maybe you should try putting the background on the blog div? I'm working on one of my sites right now, otherwise I would check it for myself. The only thing I can think of is that the blog div is actually going over the background watermark. It looks like everything else is done right.

Darn, that didn't work either. Thanks though!

Hmm, shucks.

I'll try it later, maybe tonight, and see what I can do.

I'm sure someone else on here knows the answer, anyways.

Sorry!

background-image: url"http://www.smootherthanbutter.com/water.bmp");
background-attachment: fixed;
background-position: bottom center;
background-repeat: no-repeat;

should read (shorthand) as

background: #color url(http://www.smootherthanbutter.com/water.bmp) no-repeat fixed bottom center;

this will fix your problems.

And what the hell are you using a bitmap background image for? Use a gif or a jpeg!

Ok, stupid question-Where exactly should I place this because it's still not working for me. Maybe I'm missing something, but it's having no effect on my page.

Your background image is there on the page only you can't see it because it is smaller than your page width and you have it centered on the page.
If you resize your page vertically you will see it appear in the white strip under the header image (at least in Firefox you will).

just to clarify I believe the correct way to denote a url in css is:

background-image: url(/images/blah.gif)

There should be no " or '.

You must have read it wrong, it says #color, not or. This is the color of the background.

Could you post a link to the CSS itself? I can't copy and paste from here.

I think we've established it's working fine, you just can't see it.

You should have no problems copying and pasting from here, I never do.