How to scale an image to fit a screen

Question

I have a page that I am making and I have made the footer an image... My problem is that the image is 1920x122 and it doe this when I add it to a webpage: How do I scale the image to fit the screen (I want this to work for all screens)?
Preferably CSS and HTML only.

Answer 1

Add the following property to the CSS styling for your footer:

  width: 100vw;

This sets the width of the image to 100% of the viewport width.

Answer 2

Try these in your CSS if you want it to cover the entire screen:

  background-image: *insert url*
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

Or adjust the height if you only want partial etc...