Grow your CSS skills. Land your dream job.

Center multiple large images without horizontal scrollbar

  • # February 17, 2010 at 2:21 pm

    Hello all!

    I made a web layout in Photoshop, and sliced it in pieces in Photoshop, and exported it as html. This automaticly generated an html page.
    I linked a css to it, with a background color and standard font. Now I’m trying to get my whole layout centered (multiple images). My entire layout is a fairly big size, 1680×1100px. I made it that big so a user with high resolution wouldn’t see ugly bars at the side of my layout. My content area is about 800-900px width, so any user with any resolution can see all of the content.

    The problem I’m getting is that it centers all of the images when you have a resolution bigger than 1680×1100px, but if you have a lower resolution, it would just align the image to the left, and show horizontal scrollbars.

    Here’s my current page, with the problem: http://www.bangerracing.be/Bangerracing … ayout.html
    And here’s the css with it: http://www.bangerracing.be/bangerracing_layout.css

    I hope someone can help me find a solution, I’ve been trying to get it to work for ages. ^^

    # February 18, 2010 at 3:18 pm

    Well, for starts you are using tables.

    You have the right idea with a big background but a smaller content area, but the tables are ruining it for you.

    What you should do is just have one big background image (try to keep the file size small), apply it to the body and center it. Something like:

    Code:
    body {
    background: url(../images/your-bg-image.jpg) top center no-repeat #color;
    }
    # February 18, 2010 at 3:20 pm

    I know how to do it with 1 background image, but what about multiple images?
    The reason I have multiple images is that I have sliced them up. On my other website I have a 1-piece background, but it takes aaaages to load. With multiple smaller images it loads way faster.

    # February 18, 2010 at 3:23 pm
    "Dark Ashelin" wrote:
    I know how to do it with 1 background image, but what about multiple images?
    The reason I have multiple images is that I have sliced them up. On my other website I have a 1-piece background, but it takes aaaages to load. With multiple smaller images it loads way faster.

    Right, but it’s not going to work with tables like that.

    I think you’re just going to have to go one-piece. With people’s internet connection getting better and better, if you can keep the image under 200KB you might be ok.

    # February 18, 2010 at 4:01 pm
    "TheDoc" wrote:
    "Dark Ashelin" wrote:
    I know how to do it with 1 background image, but what about multiple images?
    The reason I have multiple images is that I have sliced them up. On my other website I have a 1-piece background, but it takes aaaages to load. With multiple smaller images it loads way faster.

    Right, but it’s not going to work with tables like that.

    I think you’re just going to have to go one-piece. With people’s internet connection getting better and better, if you can keep the image under 200KB you might be ok.

    1) I know most of the people this website is aiming for do NOT have a strong computer. For them even the simplest websites load slow.
    2) I don’t think I can get the image under 200kb and still have a decent look.

    There’s got to be another way, right? I’ve seen other websites with multiple-piece backgrounds before, so it can’t be impossible.

    # February 18, 2010 at 4:21 pm

    Then as The Doc says you can’t use tables. Most modern sites use html and css for layout which permits the usage of multiple background images.

    # February 18, 2010 at 5:20 pm
    "virtual" wrote:
    Then as The Doc says you can’t use tables. Most modern sites use html and css for layout which permits the usage of multiple background images.

    Ok sure, I wasn’t planning on using tables in the start but that’s what Photoshop standard gave me when I exported as html. I’ll gladly remove any tables if you can help me on getting it to work ^^

    # February 19, 2010 at 5:25 am

    I would start from scratch and resave out your images from Photoshop yourself. Save the background black to blue part and put it on the body tag. It doesn’t have to be very high and repeat-y, or too wide (1000px should be enough) and use a background colour the same as the outer edge of the image, that way wide screen users won’t have a cut off. Then use a container or wrapper div and center using margin: 0 auto; and into this div put your header, content and footer divs with their respective parts of the image.
    I presume you know how to optimize your images for the web from Photoshop to save on file size.

    # February 19, 2010 at 6:04 am

    Well I guess I’ll have to do it that way. Thanks anyways.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".