14 replies [Last post]
Manhattanguy
Offline
Regular
Last seen: 15 years 19 weeks ago
Joined: 2004-07-26
Posts: 11
Points: 0

I'm having a problem with my background. What I'm trying to do is have the background image appear and remain fixed while my content is able to scroll. I'm using the following CSS but it's not working correctly:

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

Can anyone help? Thanks!

OPTAdmin
Offline
Enthusiast
Dover, OH -- Soon to be Columbus, OH
Last seen: 15 years 19 weeks ago
Dover, OH -- Soon to be Columbus, OH
Joined: 2004-07-27
Posts: 108
Points: 0

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.

I am going to be attending The Ohio State University this fall as an incoming freshman, majoring in Computer Science and Engineering.

Go Bucks!

Manhattanguy
Offline
Regular
Last seen: 15 years 19 weeks ago
Joined: 2004-07-26
Posts: 11
Points: 0

Background Problem

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.

OPTAdmin
Offline
Enthusiast
Dover, OH -- Soon to be Columbus, OH
Last seen: 15 years 19 weeks ago
Dover, OH -- Soon to be Columbus, OH
Joined: 2004-07-27
Posts: 108
Points: 0

Background Problem

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?

I am going to be attending The Ohio State University this fall as an incoming freshman, majoring in Computer Science and Engineering.

Go Bucks!

Manhattanguy
Offline
Regular
Last seen: 15 years 19 weeks ago
Joined: 2004-07-26
Posts: 11
Points: 0

Background Problem

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>

OPTAdmin
Offline
Enthusiast
Dover, OH -- Soon to be Columbus, OH
Last seen: 15 years 19 weeks ago
Dover, OH -- Soon to be Columbus, OH
Joined: 2004-07-27
Posts: 108
Points: 0

Background Problem

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.

I am going to be attending The Ohio State University this fall as an incoming freshman, majoring in Computer Science and Engineering.

Go Bucks!

Manhattanguy
Offline
Regular
Last seen: 15 years 19 weeks ago
Joined: 2004-07-26
Posts: 11
Points: 0

Background Problem

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

OPTAdmin
Offline
Enthusiast
Dover, OH -- Soon to be Columbus, OH
Last seen: 15 years 19 weeks ago
Dover, OH -- Soon to be Columbus, OH
Joined: 2004-07-27
Posts: 108
Points: 0

Background Problem

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!

I am going to be attending The Ohio State University this fall as an incoming freshman, majoring in Computer Science and Engineering.

Go Bucks!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 16 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Background Problem

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!

Verschwindende wrote:
  • CSS doesn't make pies

Manhattanguy
Offline
Regular
Last seen: 15 years 19 weeks ago
Joined: 2004-07-26
Posts: 11
Points: 0

Background Problem

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.

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 15 years 46 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

Background Problem

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).

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

seb
Offline
Enthusiast
Last seen: 12 years 45 weeks ago
Joined: 2003-09-20
Posts: 208
Points: 0

Background Problem

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 '.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 16 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Background Problem

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

Verschwindende wrote:
  • CSS doesn't make pies

OPTAdmin
Offline
Enthusiast
Dover, OH -- Soon to be Columbus, OH
Last seen: 15 years 19 weeks ago
Dover, OH -- Soon to be Columbus, OH
Joined: 2004-07-27
Posts: 108
Points: 0

Background Problem

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

I am going to be attending The Ohio State University this fall as an incoming freshman, majoring in Computer Science and Engineering.

Go Bucks!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 16 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Background Problem

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.

Verschwindende wrote:
  • CSS doesn't make pies