Skip to main content
Z
zalel
Participant
October 9, 2025
Question

css for resizing a static landing page

  • October 9, 2025
  • 3 replies
  • 105 views

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
    October 14, 2025

    CSS:

    img .hero {

    display:block;

    maxium-width: 100%;

    height: auto;

    }

     

    HTML

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

     

    Nancy O'Shea— Product User & Community Expert
    L
    Community Expert
    L e n aCommunity Expert
    Community Expert
    October 10, 2025

    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.

    B
    Community Expert
    Ben MCommunity Expert
    Community Expert
    October 9, 2025

    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.

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