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
Hey Jordan!
Try using a grid row element instead. It’s cells will resize depending on the screen size.
Regards,
Elliott
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.
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
Thanks Elliot!
Got the BG image issue solved per your suggestion.