Grow your CSS skills. Land your dream job.

Using a background image with a fluid width layout

  • # November 25, 2009 at 6:04 pm

    Hi,

    I have a background image that I want to incorporate into the header div of a fixed width layout. The header is of a gradient style – on the left it is a solid color and as you move along towards the right it fades to white. I’ve attached it below.

    The image is 981×76. If I bring it into Gimp, I can scale it to 1920 x 76 and it looks the same. I would like to be able to do that in a div tag, with the image as a background. I would like the image to scale horizontally just like I can do using Gimp.

    Is this possible?

    I’ve attached both images. Basically, I want the browser to manage the scaling of the image.

    # November 26, 2009 at 5:31 am

    Hi,

    Yes this is possible. I would recommend using the larger of the images, so it will be shrunk as opposed to stretched (most of the time)

    What you’ll need to do is insert the image with a normal <img> tag and then use absolute positioning to make it stretch. Then you’d use another Div with absolute positioning to put TEXT on top of that image.

    This is slightly different, but the same basic concept of how to do this:
    http://css-tricks.com/perfect-full-page … und-image/

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

You must be logged in to reply to this topic.

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