SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2005
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centred content with overflowing background image that doesn't cause scrollbars

    Hi everyone,

    I'm sure it's probably not clear from my title exactly what I'm asking here, so I'll try and clarify as best I can. I'm basically just looking for opinions on whether what I'm after is possible - I can't see a solution, but that doesn't mean there isn't one.

    So basically I want to have my content centred, which I would do in a pretty standard way:
    Code:
    width:960px; margin:0 auto;
    I then also want to have a background image that has the same left value as the content, regardless of screen resolution, that also flows off the screen to the right, but does not cause the horizontal scrollbar, regardless of screen resolution.

    So basically the background image will be left aligned to the content, and then would display as much of itself to the right that the user could see at their resolution.

    I can think of several ways of doing almost what I'm after, but none of doing exactly what I want. I'd love to hear any imnput on the subject - and let me know if any further explanation is required.

    Cheers

  2. #2
    Non-Member Max Height's Avatar
    Join Date
    Dec 2011
    Posts
    303
    Mentioned
    6 Post(s)
    Tagged
    1 Thread(s)
    something like this

    Code CSS:
    background:red url('bg.jpg') repeat-x left top;

    if you don't want the image to repeat, use no-repeat.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    This isn't hard to do if you are going to stick with your 960px width on the content.

    Create your background image in Photoshop (or similar). Make it very wide (say 2500px or whatever) and make the first layer transparent. Mark off the center of this file, and then place another guideline 480px to the left of center. Then place the image that you want to display into this file, placing its left side along that guideline that is 480px left of center. Then save this file for the web and upload it. Place it as a background image on the body element and center it horizontally:

    background: url(bgimage.png) 50% 0;

    This way, it will look like the image starts along the left edge of the content and extends way off to the right.

    That's one way to do it, anyhow.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2005
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, ingenious! Not the direction my brain had been travelling in at all - I'm afraid I was rather overcomplicating things. Thanks for the solution, just what I am looking for!


Bookmarks

Posting Permissions

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