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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Over-sized Background Image

    Hello,

    I am a somewhat new WYSIWYG designer. I would like to use a single over-sized background image of 1800px (wide), which I'd like centered at all times, never resizing, repeating or causing a horizontal scroll bar to appear in the browser as it now does.

    Basically, the browser's view port should display only the monitor’s resolution width without rescaling the image, e.g. browser’s view port is 1200px wide: it displays the center 1200px of the 1800 background image without rescaling or generating a horizontal scroll bar; the 600 remaining pixels (300 per side) extend (theoretically) beyond the view port without distortion. I hope my description makes sense.

    Over the top of the background image I would like to have my tabled content always appear centered to the background image. Here is a link to to the mock-up page:

    http://scottiedtv.com/mockup1.htm

    Here is a link to how I'd like the background image to display at different resolution (hopefully it will clarify my description):
    http://scottiedtv.com/screens.htm

    I would like the entire page including the background to scroll together.

    Thanks so much for your greatly appreciated assistance in advance!!!

    Movick
    Last edited by movick; 02-06-2012 at 03:58 AM.

  • #2
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    you'll want to check out something called Supersized.js which you can find here.

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks, but that appears to be a full screen slide show script. I know there is a way to to what I need in CSS.

  • #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 movick View Post
    I would like to use a single over-sized background image of 1800px (wide), which I'd like centered at all times, never resizing, repeating or causing a horizontal scroll bar to appear in the browser as it now does.
    Assuming that "centered at all times" means centered horizontally only, the relevant CSS declarations are:

    Code:
    background-color: crimson; /* used before image load or as fallback on load failure */
    background-image: url("/images/fireback.jpg");
    background-position: top; /* or longhand: |background-position: center top;| */
    background-repeat: no-repeat;
    This might result in code like (using the background shorthand property):

    Code:
    html { background: crimson url("/images/fireback.jpg") top no-repeat; }
    Quote Originally Posted by movick View Post
    Over the top of the background image I would like to have my tabled content always appear centered to the background image. Here is a link to to the mock-up page:
    To center a block-level element such as a table element (with display: table;) horizontally, you need to set both the left- and right-hand margins to auto:

    Code:
    table { margin-left: auto; margin-right: auto; }
    Quote Originally Posted by movick View Post
    I would like the entire page including the background to scroll together.
    This is the default behavior (described by background-attachment: scroll;).
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    movick (02-06-2012)

  • #5
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    http://scottiedtv.com/mockup1z.htm

    The background image doesn't show up at all in IE- only the crimson color.

    Thanks for hopefully getting me started in the right direction.

  • #6
    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 movick View Post
    The background image doesn't show up at all in IE- only the crimson color.
    It's displaying for me in IE9.

    Quote Originally Posted by http://scottiedtv.com/mockup1z.htm
    <div align=table { margin-left: auto; margin-right: auto; }>
    This code is not correct. You were supposed to copy the CSS into your style sheet, not paste it into an HTML align attribute.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #7
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Something was odd, but it now appears in IE. Is this correct now?
    Last edited by movick; 02-06-2012 at 10:08 AM.

  • #8
    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 movick View Post
    Something was odd, but it now appears in IE. Is this correct now?
    Given that you removed the code that prevented background-repeating and the code that was centering your background image, I would assume that it isn't. Your image is noticeably left-aligned on my screen and repeats (the default behaviors).

    table { margin-left: auto; margin-right: auto; }, CSS which is meant to center your table element, is supposed to go within the style element (i.e., between the <style> and </style> tags). You're already using the (invalid) align="center" attribute to do this though, so I guess it's a moot point. (The aforementioned CSS method is the correct way to center block-level elements.)
    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
    •