CODEWITHSUNDEEP
css
Ageis
Ageis

Reputation: 2315

How to stretch header across the screen

I have banner image that stretches the screen. I was told that the best way to stretch is to load an image at the appropriate width. So doesn't that mean you need to use JavaScript to detect the screen resolution then load the appropriate image? However JS maybe disabled. Are there alternatives?

Upvotes: 1

Views: 6488

Answers (2)

user356808
user356808

Reputation:

You can do this using pure css.

img.banner {position:absolute; z-index:1; width:100%; height:100%;}

Here is a demo by stu nicholls.

Upvotes: 0

Babiker
Babiker

Reputation: 18798

Set the image width in percentage. Notice the actual percentage will relate to the img's parents container.

Upvotes: 2

Related Questions