Wasserzeichen in HTML Form

Question

In dem Formular möchte ich mein Logo als Wasserzeichen haben. Sehr verblasst, so dass der Text einfach und gut zu lesen ist. Ich will Wasserzeichen zentrieren und größer Aber ich stecke fest .... irgendwelche Tipps?

<form style="background: ##f7f8fa; border-radius: 4px; box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3); padding: 15px;">&nbsp; 

<div> 
<div id="image" style="width: 100%;height: 100%;position: relative;top: 0;left: 0;"><img src="https://ajrecruit-mhwbfrdhg9uflyxxtkv.stackpathdns.com/wp-content/uploads/2017/07/HD_AJRecruit_Logo.png" /></div> 
<div id="watermark" style="background:url(images/HD_AJRecruit_Logo.png) no-repeat; width: 100%; height: 100%; position: relative; top: 0; left:0;"></div> 
</div> 

</form> 

Answer 1

Ich würde empfehlen, dies zu tun, da es das Formular schwerer zu lesen macht. Wenn Sie müssen es wahrscheinlich am besten ein, die Transparenz der PNG verwenden reduzieren ganz manuell mit Photoshop/GIMP etc. Dann diese versuchen:

form{ 
    background: background:url('https://ajrecruit-mhwbfrdhg9uflyxxtkv.stackpathdns.com/wp-content/uploads/2017/07/HD_AJRecruit_Logo.png'); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: auto; 
} 

Sie können Hintergrund-Größe versuchen: cover | enthalten, um es größer zu machen, aber du brauchst ein größeres Bild oder es wird gestreckt.