Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

responsive-bootstrap-based-signup-form

@jglopezre

Desktop design screenshot for the Intro component with sign-up form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

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

@jglopezre

Posted

Nice, I am going to test it, I like use media query for background changing, but, i hadn't thought in it. Thank.

0
P
Matthias 630

@astragenius

Posted

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 GitHub
Discord logo

Join 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