Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #531358

    Hi There,

    I’m using a COLOR SECTION with a background image and I’ve given it a unique ID. Could you please provide me with the css to make the background image auto-resize with the browser window? I’d like it to shrink when the browser window gets smaller, otherwise the content runs over it and I can’t read it.

    http://juliewittner.com/credits/

    If you resize the browser window to a small window, the text runs over the background image. I’d like the background image to get smaller when the window gets smaller.

    Thanks :)
    Jordan

    • This topic was modified 9 years ago by jordandsa.
    #531511

    Hey Jordan!

    Try using a grid row element instead. It’s cells will resize depending on the screen size.

    Regards,
    Elliott

    #534465

    That worked well for that page, but now I have a different problem. I’d like the BG image to be the entire page:
    http://juliewittner.com/reels-02/
    but resize with the browser window so the right column does not hover over the image and block the face.

    Also, the header cuts off the top of the COLOR SECTION background image. Is there a way to move the color section bg image down so the full image is under the header?

    Thanks so much.

    • This reply was modified 8 years, 11 months ago by jordandsa.
    #535696

    Hey!

    Yes, you can set the header style to transparent when you edit the page.

    For the resizing with the grid row I don’t see an easy way of going about that. You would probably need to add the image with the image element in the first cell so it resizes with the browser width.

    Cheers!
    Elliott

    #535698

    Thanks Elliot!

    Got the BG image issue solved per your suggestion.

    • This reply was modified 8 years, 11 months ago by jordandsa.
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Auto-Resize Background Image With Browser Window’ is closed to new replies.