Please don't add information about the version of Twine or the Story Format you're using to the Question Title, it makes it unnecessary long without serving a real purpose.
You didn't state if you were assigning the .titlepage class in your CSS as a titlepage Passage Tag to your Passage or not, but based on the images you provided I will assume that you are. You also didn't explain what the
The second image shows that you have two copies of the background image overlaying each other, and this is a result of the fact that SugarCube 2 adds assigned Passage Tags to a number of different HTML elements of the generated page, which you can Inspect yourself using your web-browser's Web Development Tools.
If you look at the HTML of the generated page looks something like the following: (which I've simplified)
<html data-tags="titlepage">
<head>...</head>
<body data-tags="titlepage" class="titlepage">
....
<div id="story" role="main">
<div id="passages">
<div id="passage-start" data-passage="Start" data-tags="titlepage" class="passage titlepage">
<img src="images/humanity.png" height="130" width="500" alt="HUMANITY">
<br>
<a data-passage="START" class="link-broken" tabindex="0">START</a>
<br>
<a data-passage="CREDITS" class="link-broken" tabindex="0">CREDITS</a>
</div>
</div>
</div>
</body>
</html>
... and as you can see titlepage appears in two class properties (as well as two of data-tags properties but that's not important in this case) which causes the background image to be added twice.
This is easily fixed by changing your .titlepage CSS selector to the following.
body.titlepage {
background-image: url("https://media.playstation.com/is/image/SCEA/detroit-become-human-screen-17-ps4-us-13apr18?$native_nt$");
background-size: cover;
font-size: 150%
}