Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Using a background image with a fluid width layout

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #26925
    MusicalShore
    Member

    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.

    #67091
    AshtonSanders
    Participant

    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:
    https://css-tricks.com/perfect-full-page … und-image/

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.