Zoom In/Out on background image when resizing the browser page

Question

I am currently developing the footer of a web page in HTML / CSS. This footer will contain a lot of elements (address, links, buttons, ...) and it must, therefore, be responsive. Consequently, on a desktop version, we have all the footer's elements on a row and, then on mobile we have all the footer's elements on a column (as the following images show you);

My goal is to get the result below on a widescreen (desktop):

And here is the result I want to achieve on a mobile screen:

As you can see, we must have a zoom effect when resizing the page of a browser or when we pass on a smartphone screen. I have a lot of elements to insert in the footer so the image must be zoomed to integrate them all.

Here is the code I have done so far.

.footer {
  height: 639px;
  background: url("https://nsa40.casimages.com/img/2020/07/11/200711012945662645.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

The result is almost what I want but the problem is that the height of the footer does not change, and therefore I do not have enough space to put all my elements in the footer in the mobile version.

Thank you :)

user_13919730 · Answer

Try adding height: auto, padding-top, padding-bottom in a media query for phone. You may have to experiment with the padding values a few times to make it look good. Also change the background-position so the curve can be seen on mobile phones. It will look something like this.

@media (max-width: 991.98px){
.footer{
  height: auto;
  padding: 50px 0;
  background-position: center top; 
 }
}

user_10002142 · Answer

@media screen and (min-width: 480px) { //480px is breakpoint you can adjust according to your need

    .footer {
      height: auto;
      background: url("https://nsa40.casimages.com/img/2020/07/11/200711012945662645.png");
      background-position: center top; //adjust according to you need
      background-repeat: no-repeat;
      background-size: cover;
      padding-top: 3rem; //adjust according to your need
      padding-bottom:3rem; //adjust according to your need
      padding-left:inherit;
      padding-right:inherit;
    }
}

Zoom In/Out on background image when resizing the browser page

2 Answers