HTML Background Auto-Resizing

Question

I am attempting to set an image as the background and have it auto-resize and auto-center when the window changes size. Right now I have the auto-resize and auto-center working perfect, but I have no clue how to make it my background image. I had to replace all opening and closing symbols with the PLUS (+) symbol. My current code is as follows:

<div style="text-align: center;">
<img src="amazing.jpg" style="max-width: 100%; height: auto;" alt="Epoxy Flooring of NY" />
</div>

Any suggestions to make it the background instead of just a picture taking up the whole screen? I need the words on top of it, not under it.

Answer 1

Welcome to the stackoverflow-community :)

Just use the background-image -property instead of an <img> -tag.

<div style="background-image:url('amazing.jpg')">
   <!-- your text here -->
</div>

For more information See here and here .

Note:

If you use background-image instead of <img> you will not see anything unless you give the <div> a height, by either filling it with text or/and setting it's height of, for example, 100px.

Answer 2

There is two ways to do it one using the css background img property and the other using the HTML img tag.

https://jsfiddle.net/pdhgLap8/

Basically what you need to add to use background images is

  background-image: url("https://i.imgur.com/SebQr4d.jpg");
  background-size: contain;
  background-repeat: no-repeat;

This will set the background image make it so it is only as large as the div it is in and make it so it doesn't repeat to fill the div