Shrinking Photo Background on Mobile Devices

sirajsiraj Saudi ArabiaRegistered Users Posts: 2 Beginner grinner
Hi,

I have a photo background set on my website, and it's displaying well on the desktop computer, however, but when opened on mobile devices, it's not displaying well as it does not re-size itself to adjust as the full-size photo on the mobile screen.

Is there any CSS code to make that? as I want the photo to be shrunk to fit the entire mobile screen size?

Comments

  • AllenAllen "tweak 'til it squeaks" St. Louis, MoRegistered Users Posts: 9,976 Major grins
    edited November 26, 2022

    I've had this around for years.
    Probably could resize for mobile.

    Photos adjust size with browser width.
    
    img {
        max-width: 100%;
        height: auto;
    }
    
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • sirajsiraj Saudi ArabiaRegistered Users Posts: 2 Beginner grinner
    > @Allen said:
    > I've had this around for years.
    > Probably could resize for mobile.
    >
    > Photos adjust size with browser width.img { max-width: 100%; height: auto;}

    Thank you Allen, I have tried this code, but it seems it didn't change it, and still, the background image did not shrink, maybe I need to play around with the size of the image itself.
Sign In or Register to comment.