css for resizing a static landing page

[zalel]

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 

[Ben M]

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.

[L e n a]

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.

[Nancy OShea]

CSS:

img .hero {

display:block;

maxium-width: 100%;

height: auto;

}

HTML

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