Design comparison
Solution retrospective
Hi guys, i need some ideas, about image on background, I don't know how to make it to cover entirely background when resolution is greater than 1440px, I used object-fit: cover but it doesn't perform changes. Thank a lot for yours answers. Greeting.
Community feedback
- @jglopezrePosted almost 3 years ago
Nice, I am going to test it, I like use media query for background changing, but, i hadn't thought in it. Thank.
0 - @astrageniusPosted almost 3 years ago
Hi my friend :)
Delete the div and picture element with the class .background-image. And delete the class in the css file aswell. (these are not necessary) Set the background-image on the body via CSS. (less code)
I make this change on your css file:
body { background-image: url(./images/bg-intro-desktop.png); background-color: #ff7a7a; min-height: 100vh; font-family: "Poppins", sans-serif; }
You can make a mediaquerie to change the mobile image aswell.
media (max-width: 375px) { body { background-image: url(./images/bg-intro-mobile.png); } }
This shoult work:)
have a nice day :)
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord