Fit background image vertically and horizontally
Hello guys I am ashamed that I am still struggling with fitting background images in both directions (vertical and horizontal). I have used
background-size: cover; and it will strech the image in both direction, but what I am not liking is, my image cuts off in bottom and I don't like that, I have an image with Full HD size. I just wanted the whole part of image to be shown regardless of size of the screen.8 Replies
Why not use an image tag by chance then? Background images are fully dependent on the size of the element and cannot influence it, which is not ideal if you need the image to tell the element "Hey, I need you to get bigger or smaller to fit everything"
Kevin Powell
YouTube
Background images with HTML & CSS
In this video, I look at how to set a background image, problems people run into with them and how to fix them, and finish things off with a bonus tip on readability.
🔗 Links
✅ How to select things in your CSS: https://www.youtube.com/watch?v=JVsI0fspik8&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-&index=9
✅ Why you should use Firefox when learn...
I mean I know how background images work, but I'm asking about your exact example
Show me how it cuts off and everything
by defualt background-size: cover fills or strechs the background right? in my case, the background image I have applied gets croped when the image is stretched by the background-size property I have set, but I didn't want that I want the aspect ratio of the image be the same with the original image.
background-size - CSS: Cascading Style Sheets | MDN
The background-size CSS property sets the size of the element's background image.
The image can be left to its natural size, stretched, or constrained to fit the available space.
I used aspect-ratio of 16/9 and now I can see the full height of the image but with scroll on vertical, I am using 1080PX image
Thank God this thing fixed my issue, https://discord.com/channels/436251713830125568/1135257320494989373/1135303602991280179
I was using SVG too and I removed the height and width from the svg and it worked
Lol good! Funny my post from another thread was the answer but glad it worked out! It's tough to help people without code reproductions but SVG's can be frustrating in the sense they always have the same couple problems
yeah thank you so much and I am sorry I didn't expressed the problem very well, I know a bit about CSS and now confident after enrolling on Kevins course but background image is the mystery thing that I had a problem with since old days 😁 , recently I stick on using SVGs on my hero page backgrounds and I liked the resolutions. Thanks again