page background shrinks with window

Discussion in 'HTML' started by meagain, Feb 11, 2013.

  1. meagain

    meagain Guest

    <style type="text/css"> body { padding-left: 20px; background-image:
    url('NowPlayBkgnd.jpg');
    background-repeat: no-repeat; background-attachment: fixed; background-size: 100%; }
    </style>

    The .jpg fills the screen nicely when the window is full width, but if the
    window shrinks the background shrinks proportionally thus leaving not-picture
    at the bottom of the user's screen.

    Is there a way to say not-isometric or fill to bottom of screen or other approach?
    meagain, Feb 11, 2013
    #1
    1. Advertising

  2. meagain

    Gus Richter Guest

    On 2/11/2013 11:00 AM, meagain wrote:
    > <style type="text/css"> body { padding-left: 20px; background-image:
    > url('NowPlayBkgnd.jpg');
    > background-repeat: no-repeat; background-attachment: fixed;
    > background-size: 100%; }
    > </style>
    >
    > The .jpg fills the screen nicely when the window is full width, but if the
    > window shrinks the background shrinks proportionally thus leaving
    > not-picture
    > at the bottom of the user's screen.
    >
    > Is there a way to say not-isometric or fill to bottom of screen or other
    > approach?


    add: background-size:cover;

    support: <http://caniuse.com/#search=background-size>

    --
    Gus
    Gus Richter, Feb 11, 2013
    #2
    1. Advertising

  3. meagain

    dorayme Guest

    In article <kfb4ik$4fh$>,
    meagain <> wrote:

    > <style type="text/css"> body { padding-left: 20px; background-image:
    > url('NowPlayBkgnd.jpg');
    > background-repeat: no-repeat; background-attachment: fixed; background-size:
    > 100%; }
    > </style>
    >
    > The .jpg fills the screen nicely when the window is full width, but if the
    > window shrinks the background shrinks proportionally thus leaving not-picture
    > at the bottom of the user's screen.
    >
    > Is there a way to say not-isometric or fill to bottom of screen or other
    > approach?


    The other approach is to prepare a large picture that fills most
    screens and is suitable if not all of it shows on some viewport sizes.

    --
    dorayme
    dorayme, Feb 13, 2013
    #3
  4. meagain

    meagain Guest

    Gus Richter wrote:
    > On 2/11/2013 11:00 AM, meagain wrote:
    >> <style type="text/css"> body { padding-left: 20px; background-image:
    >> url('NowPlayBkgnd.jpg');
    >> background-repeat: no-repeat; background-attachment: fixed;
    >> background-size: 100%; }
    >> </style>
    >>
    >> The .jpg fills the screen nicely when the window is full width, but if the
    >> window shrinks the background shrinks proportionally thus leaving
    >> not-picture
    >> at the bottom of the user's screen.
    >>
    >> Is there a way to say not-isometric or fill to bottom of screen or other
    >> approach?

    >
    > add: background-size:cover;
    >
    > support: <http://caniuse.com/#search=background-size>
    >


    Beautiful!

    Thank you.
    meagain, Feb 15, 2013
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Miguel De Anda
    Replies:
    0
    Views:
    597
    Miguel De Anda
    Aug 13, 2003
  2. Replies:
    25
    Views:
    1,170
  3. Mark
    Replies:
    10
    Views:
    639
    Steven Cheng [MSFT]
    May 15, 2008
  4. Nelson Ashton
    Replies:
    4
    Views:
    1,390
    Knute Johnson
    Oct 13, 2008
  5. coocoo2008

    Content shrinks in IE7 popup window

    coocoo2008, Jan 15, 2008, in forum: Javascript
    Replies:
    1
    Views:
    108
    The Natural Philosopher
    Jan 15, 2008
Loading...

Share This Page