Hintergrundbild wird aufgeteilt

Question

Ich versuche ein Hintergrundbild hinzuzufügen, um hinter ein Kontaktformular in BetterCMS zu gehen, aber aus irgendeinem Grund wird das Hintergrundbild nur auf die Textelemente meines Formulars wie unten angewendet;

Ich habe Absolutey keine Ahnung, warum dies geschieht, habe ich den Z-Index auf 999 gesetzt, aber es immer noch nicht solide gehen!

Irgendwelche Gedanken dazu würden geschätzt!

HTML

<div class="pull-right"> 
<div class ="formcontainer"> 
<form> 

first name <br> 

<input type="text" name="firstname"><br> 
Last name <br> 

<input type="text" name="lastname"><br> 

Email <br> 

<input type="text" name="email"><br> 

Phone Number <br> 

<input type="text" name="PhoneNumber"><br> 

</form> 
</div> 
</div> 

css

.formcontainer 
{ 
    background-image:url("http://localhost:53514/uploads/image/7d595f93f6b343d1aeab5958bc844f91/bikes_1.png"); 
    z-index:9999; 
} 

Answer 1

Sie die Formularelemente transparent einstellen:

body { 
 
    background-color: red; 
 
} 
 

 
input { 
 
    background-color: transparent; 
 
}

<input type="text">

Standardmäßig haben sie eine Standardhintergrundfarbe, die aus dem Betriebssystem stammen kann.