Grow your CSS skills. Land your dream job.

Apply Background Image to DIv

  • # September 22, 2009 at 2:41 am

    Hi Friends,
    I need to apply backgroundimage to div.Here my div height and width was dynamic.
    My problem was If div width and height was 100px,and yhe image width and height was 50px.In this situation i need to strech the image to whole div.How can i do this .Can any one provide sample css code.Below is the code which i am using…

    <html >
    <head >
    <title>Untitled Page</title>
    <style type="text/css">
    .divbg
    {
    height:100px;
    width:100px;
    background-image:url(index_02.jpg);

    }
    </style>
    </head>
    <body>
    <div id="div1" class="divbg">
    </div>
    </body>
    </html>

    # September 22, 2009 at 3:57 am

    I think your best bet would be stretching it in photoshop or some other photo editor or repeating the image.

    # September 22, 2009 at 10:05 am

    hi,

    Please cut the image with specified width and 1px height, then repeating the image.
    .divbg
    {
    height:100px;
    width:100px;
    background-image:url(bg_image1.jpg) repeat-x;
    }

    Thanks & regards

    # September 22, 2009 at 12:09 pm

    I don’t think he is referring to an image which can be repeated over a particular axis. He is referring to an image which is of a particular width and height. I think you should refer to that tutorial where Chris resizes a background body image with change of browser size. May be you can get any leads from there :)

    # September 23, 2009 at 6:41 am

    Thank u for reply
    With out Image Editing can we strech the image by using css

    # September 23, 2009 at 1:16 pm

    I don’t think its possible with pure CSS only. You might be needing javascript for it too.
    Anyway, here are the two posts that I mentioned before:

    Perfect Full Page Background Image
    How To: Resizeable Background Image

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".