CSS background-image ... Possible to scale image?

Discussion in 'HTML' started by Noozer, Dec 7, 2004.

  1. Noozer

    Noozer Guest

    Is it possible to specify a background-image for a CSS class and have that
    image scale to fit whatever space is taken by the content of the object
    using that class?

    ie.

    CSS:
    .button {background-image: url(button.gif);}

    HTML:
    <p>...next, click the <span class="button">OK</span> button to accept the
    change or click the <span class="button">Cancel</span> button to cancel the
    changes.</p>


    ....and the "button.gif" image would be scaled to fit the height/width of the
    "OK" text and the "Cancel" text on the page?
     
    Noozer, Dec 7, 2004
    #1
    1. Advertising

  2. Noozer

    Neal Guest

    On Tue, 07 Dec 2004 20:26:18 GMT, Noozer <> wrote:

    > Is it possible to specify a background-image for a CSS class and have
    > that
    > image scale to fit whatever space is taken by the content of the object
    > using that class?
    >
    > ie.
    >
    > CSS:
    > .button {background-image: url(button.gif);}
    >
    > HTML:
    > <p>...next, click the <span class="button">OK</span> button to accept
    > the
    > change or click the <span class="button">Cancel</span> button to cancel
    > the
    > changes.</p>
    >
    >
    > ...and the "button.gif" image would be scaled to fit the height/width of
    > the
    > "OK" text and the "Cancel" text on the page?


    In this case the image would scale terribly. Try this:

    ..button: {
    background: url(button.gif) repeat-x;
    }

    and have the image be a regular-height but narrow image which will then
    repeat left to right for the width of the element.
     
    Neal, Dec 7, 2004
    #2
    1. Advertising

  3. Noozer wrote:

    > Is it possible to specify a background-image for a CSS class and have that
    > image scale to fit whatever space is taken by the content of the object
    > using that class?


    No.

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    Home is where the ~/.bashrc is
     
    David Dorward, Dec 7, 2004
    #3
  4. Noozer

    Noozer Guest

    > > CSS:
    > > .button {background-image: url(button.gif);}
    > >
    > > HTML:
    > > <p>...next, click the <span class="button">OK</span> button to accept
    > > the
    > > change or click the <span class="button">Cancel</span> button to cancel
    > > the
    > > changes.</p>
    > >
    > >
    > > ...and the "button.gif" image would be scaled to fit the height/width of
    > > the
    > > "OK" text and the "Cancel" text on the page?

    >
    > In this case the image would scale terribly. Try this:
    >
    > .button: {
    > background: url(button.gif) repeat-x;
    > }
    >
    > and have the image be a regular-height but narrow image which will then
    > repeat left to right for the width of the element.


    Thanks, but the image doesn't "roll" properly.

    The "button.gif" has "edges"on all four sides so the repeat-x wouldn't work.

    Not a big deal, but would be nice to have.

    Thx!
     
    Noozer, Dec 7, 2004
    #4
  5. Noozer

    Noozer Guest

    "David Dorward" <> wrote in message
    news:cp55oj$jv9$1$...
    > Noozer wrote:
    >
    > > Is it possible to specify a background-image for a CSS class and have

    that
    > > image scale to fit whatever space is taken by the content of the object
    > > using that class?

    >
    > No.


    Didn't think so, but wanted to make sure I wasn't missing anything obvious.

    Thx!
     
    Noozer, Dec 7, 2004
    #5
  6. Noozer

    Neal Guest

    On Tue, 07 Dec 2004 21:19:08 GMT, Noozer <> wrote:

    > The "button.gif" has "edges"on all four sides so the repeat-x wouldn't
    > work.


    Replace the edges with CSS borders. It's really the best you can do.
     
    Neal, Dec 7, 2004
    #6
    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. Erik Harris

    CSS: Two background images possible?

    Erik Harris, Mar 4, 2004, in forum: HTML
    Replies:
    17
    Views:
    55,585
    Erik Harris
    Mar 5, 2004
  2. Greg Lazarchik

    background scale

    Greg Lazarchik, Jun 3, 2004, in forum: HTML
    Replies:
    2
    Views:
    5,807
    Sid Ismail
    Jun 3, 2004
  3. jc
    Replies:
    3
    Views:
    1,755
  4. jc
    Replies:
    1
    Views:
    1,382
    Neredbojias
    Mar 19, 2008
  5. Dj Frenzy
    Replies:
    3
    Views:
    325
    Robert
    Feb 10, 2004
Loading...

Share This Page