Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Center multiple large images without horizontal scrollbar

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #28048
    Dark Ashelin
    Member

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

    #71108
    TheDoc
    Member

    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;
    }
    #71109
    Dark Ashelin
    Member

    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.

    #71110
    TheDoc
    Member
    "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.

    #71114
    Dark Ashelin
    Member
    "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.

    #71126
    Dark Ashelin
    Member
    "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 ^^

    #71160
    Dark Ashelin
    Member

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.