CSS background image to fit width height should auto-scale in proportion

0 votes

I have

body {
    background: url(images/background.svg);
}

This background image's width should match the width of the page, with the height varying to keep the proportion. For instance, if the body is 600 pixels wide and the source image is 100*200 (or any other measurement), the backdrop image should end up being 1200 pixels high. If the window is resized, the height needs to adjust automatically. Can this be done?

Firefox appears to be fitting the height right now before altering the width. Maybe it's attempting to avoid cropping because height is the longest dimension. Without repeating horizontally, I want to crop vertically and then scroll.

Additionally, Chrome centers the image with no repetition even when background-repeat: repeat is explicitly specified, which is the default.

Jul 29, 2022 in CSS by Edureka
• 13,620 points

edited 4 days ago 7 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP