Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: CSS background

  1. #1
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy CSS background

    Hello,

    I'm new to CSS and am using this tutorial 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

  • #2
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 -->


  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello MegShmeg,
    The image http://i22.photobucket.com/albums/b3...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
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by MegShmeg View Post
    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 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.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •