/    Sign up×
Community /Pin to ProfileBookmark

Compressing a background image to fit within a #div

Copy linkTweet thisAlerts:
Dec 13.2008

I have a #div which has a width of 800px and a height of 25px, and an image which has a width of 500px and a height of 50px.

The image is set as the background of the #div using “background-image: url(“images/bg_list.gif”);”.

How do I make the height of the image (50px) compress into the height of the #div (25px)? I want the entire image to be visible within the #div.

I could of course compress the height of the image using Photoshop, though I’d prefer for it to be dynamic, so that it adjusts itself if I change the height of the #div.

Thank you for your time.

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelDec 14.2008 — I don't think that you can. -a background image exerts no 'pressure' upon the container, so any 'overflow' will be clipped by default. That is the advantage of background image, being 'out of document' so that container can 'contain' things that [I]do[/I] exert pressure against container...

Possibly though, a javascript solution might render a image of known size into a container of known(smaller) size by compressing to fit, with percentages and still be 'background'...
Copy linkTweet thisAlerts:
@cootheadDec 14.2008 — Hi there IanMartins,

This is in the CSS3 draft...
[list]
  • [*]http://www.w3.org/TR/2002/WD-css3-background-20020802/#background-size
    • [/list]
    ...and has already been implemented by Opera, Safari and Konqueror.

    Have a look at this test example...
    [color=navy]
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">

    <style type="text/css">
    #background {
    width:384px;
    height:256px;
    border:3px double #f00;
    margin:10px auto;
    background-image:url(http://www.coothead.co.uk/images/blood.jpg);
    -o-background-size:100% 100%; /* Opera */
    -webkit-background-size:100% 100%; /* Safari */
    -khtml-background-size:100% 100%; /* Konqueror */[color=red]
    -moz-background-size:100% 100%; /*not working in Firefox as yet */[/color]
    background-repeat:no-repeat;
    }

    #container img {
    display:block;
    margin:auto;
    border:3px double #f00;
    }
    </style>

    </head>
    <body>

    <div id="background"></div>

    <div id="container"><img src="http://www.coothead.co.uk/images/blood.jpg" alt=""></div>

    </body>
    </html>
    [/color]
    [i]coothead[/i]
    Copy linkTweet thisAlerts:
    @cootheadDec 14.2008 — Hi there IanMartins,

    here is a work-around for those browsers that have not as yet implemented [b]background-size[/b]...
    [color=navy]
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">

    <style type="text/css">
    #box {
    position:relative;
    width:384px;
    height:256px;
    border:3px double #f00;
    margin:10px auto;
    }
    #box img {
    position:absolute;
    width:100%;
    height:100%;
    }
    #box div {
    position:absolute;
    width:100%;
    height:100%;
    color:#fff;
    line-height:256px;
    text-align:center;
    }
    #container img {
    display:block;
    margin:auto;
    border:3px double #f00;
    }
    </style>

    </head>
    <body>

    <div id="box">

    <img src="http://www.coothead.co.uk/images/blood.jpg" alt="">

    <div>this is some content</div>

    </div>

    <div id="container"><img src="http://www.coothead.co.uk/images/blood.jpg" alt=""></div>

    </body>
    </html>
    [/color]
    [i]coothead[/i]
    Copy linkTweet thisAlerts:
    @deyesbornApr 24.2011 — Please how can I make my backgroud image fit 100% to div of any size without repeating?

    I have a div that is 100% which fit to any screen resolution and I want the background image to also fit to the div without repeat.
    Copy linkTweet thisAlerts:
    @cootheadApr 24.2011 — Hi there deyesborn,

    and a warm welcome to these forums. ?

    This should work in modern browsers...
    [color=navy]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english">
    <meta http-equiv="Content-Style-Type" content="text/css">

    <title>stretched background image</title>

    <style type="text/css">
    html,body {
    margin:0;
    padding:0;
    height:100%;
    }
    #mydiv{
    height:100%;
    background-image:url(http://www.coothead.co.uk/images/blood.jpg);
    background-size:100% 100%;
    -webkit-background-size:100% 100%; /* Safari */
    -khtml-background-size:100% 100%; /* Konqueror */
    -moz-background-size:100% 100%; /* Firefox */
    }

    </style>

    </head>
    <body>

    <div id="mydiv"></div>

    </body>
    </html>
    [/color]
    [i]coothead[/i]
    Copy linkTweet thisAlerts:
    @deyesbornApr 24.2011 — Thanks so much. It work
    ×

    Success!

    Help @IanMartins spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.17,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...