Skip to main content
zalel
Participant
Oct 9, 2025 2:59 AM UTC
Question

css for resizing a static landing page

I'm working on a site that I need to display today. The landing page is one image, for getting viewers to return.

 

On the Dreamweaver page, I attached css that i expected to make the big png resize according to the viewing screen. It didn't work.

 

Is there one particular instruction that should always get used for a case like this?

 

thanks,

Nicky 

    3 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    Oct 14, 2025 9:28 PM UTC

    CSS:

    img .hero {

    display:block;

    maxium-width: 100%;

    height: auto;

    }

     

    HTML

    <img class="hero" src="my_reponsive_image.jpg" alt="some description here">

     

    Translate
    Nancy O'Shea— Product User & Community Expert
    Community Expert
    L e n aCommunity Expert
    Community Expert
    Oct 10, 2025 8:22 AM UTC

    The easiest way is probably to check this article: How to create a fullscreen hero image with CSS, and also follow this StackOverflow discussion that covers many related issues 

     

    These two links explore different techniques and problems, especially on mobile. It’s better than relying on one single CSS rule.

    Translate
    Community Expert
    Ben MCommunity Expert
    Community Expert
    Oct 9, 2025 12:20 PM UTC

    Having one big image that will stretch to fill a screen can cause distortion in the image depending on the end user's screen resolution. If you can share the page in question that would help us to provide guidance for the best way to go about your desired outcome.

    Translate
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices