CSS background

MegShmeg

01-26-2007, 03:36 PM

Hello,

I'm new to CSS and am using this tutorial (http://veerle.duoh.com/index.php/blog/comments/designing_a_css_based_template_part_iv/) to create a blog layout with a header and content column and such. She explains how to create a background pattern that is 1600px wide and 5px high, and to use:

body {
background: #F7F7F6 url(images/background.gif) repeat-y 50% 0;
background-attachment: fixed;
}

I've followed the directions, creating my pattern in Paint. I upload the GIF to Photobucket.com and when I load up my page, the image repeats vertically perfectly, but appears "squashed" in the center, and on either side of the background are big spaces of white. Now, when I look at HER link for her finished product, the background looks perfect. I even tried saving her background image, uploading it to Photobucket, using it in my code, and even hers appears messed up then. Maybe it's Photobucket? I'm terribly confused.

Any help is much appreciated.

Megan

MegShmeg

01-26-2007, 03:46 PM

And just to be sure you have all the info, here's the entire code I was using:

************************

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>My Blog</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
body {
background: #F7F7F6 url("http://i22.photobucket.com/albums/b304/mddelong/background.gif") repeat-y 50% 0;
background-attachment: fixed;
}
</style>

</head>

<body>

</body>

</html>
**********************

(That's using her background image which I uploaded to Photobucket.com)

And here's a shot of my problem -->

http://i22.photobucket.com/albums/b304/mddelong/badbg.jpg

Excavator

01-26-2007, 06:18 PM

Hello MegShmeg,
The image http://i22.photobucket.com/albums/b304/mddelong/background.gif is only 800px X 3px so it's not going to be 1600 wide...

If your using solid colors, why use an background image at all? I see blogs doing this all the time and it just make your site very limited on width/resolution. There seems to be a LOT of really bad tutorials on building blogs.

Instead, by using a background color, you can make your site a little more fluid. A centered div with white borders can hold your content and then we'll add one image on the left to finish.

Like this (http://www.nopeople.com/MegShmeg/)

Arbitrator

01-26-2007, 10:23 PM

I upload… to Photobucket.com and when I load up my page, the image… appears "squashed" in the center…The maximum image dimensions permitted under a free Photobucket account are 1024×768 pixels. If you try to upload an image that exceeds the permitted dimensions, then Photobucket automatically resizes it. I believe the default maximum is actually smaller (800×600), which would explain why the image was resized to be 800 pixels wide instead of 1024. ImageShack (http://www.imageshack.us/) is a Photobucket alternative that accepts larger images; however, you should probably be uploading images to your Web site’s server, not an image hosting service.