CSS 2 images with text on top

Question

I want to have 2 images take up "exactly half" of the width of the page each. Over the top of these 2 images, I'd like to keep the heading of the page. What have I got wrong?

https://code.sololearn.com/WBOIbuJd2W9R/?ref=app

Answer 1

https://css-tricks.com/css-basics-using-multiple-backgrounds/

Answer 2

Add this to the css for h1:
background-image: url("https://www.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg"), url("https://www.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-position: left;
background-position: right;
background-size: 50%;
background-size: 50%;

Answer 3

Simon Sauter with your advice and that link...
It clicked.
As I was writing the reply *lightbulb*

Answer 4

Chris C. Yeah

Answer 5

The problem with putting the code in h1 is that the image only fills the container of h1. Your tip does the split as I want it, but I'd like the images to fill the entire page.
I've read the link and it's similar to others I've read, which is why I then posted here - not sure what isn't working in my head that makes my code so poor.

Answer 6

Use 50vh 50vw instead

Answer 7

Did you solve the problem?