[CSS] fissare elemento (input) ad un'immagine di sottofondo

[reazioneacatena]

Come da titolo: ho un'immagine (png) e un inputbox (text). devo posizionare l'input in un preciso punto dell'immagine.
Fin qui lo faccio semza problemi, ma se ridimensiono la finestra si sballa tutto mentre io vorrei che l'input si rimpicciolisse / ingrandisse assieme all'immagine.
Si può fare? Quali CSS devo utilizzare?
Grazie a chi mi può aiutare.

[lucafornaciarifotografie]

Puoi usare delle media query

[dreadnaut]

@reazioneacatena Hai una pagina di esempio dove possiamo vedere la tua soluzione corrente? È utile avere un punto di partenza per suggerirti il passo successivo.

[reazioneacatena]

qui potete vedere un esempio.
Sostanzialmente sarebbe una pagina di login dove la parte in giallo è l'input che ho messo nello spazio bianco, la stessa cosa poi la dovrei fare per la password e successivamente per il bottone/submit.
Non so come la vedete dal vostro dispositivo ma dal mio PC è "perfetta" salvo ovviamente quando ridimensiono la finestra.

codice PHP:

<div id="contenitore_grande">  
    <form action="include/verify_login.php" method="POST">    
    <input class="inserimento_piccolo" type="text" id="username" name="username" />

        <button class="bottone" type="submit">Login</button>
    </form>
</div> 

codice CSS:

body {
background-image: url("immagini/impostazione_schermata_accesso.png");
background-repeat: no-repeat;
background-position: 0 0;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: 60%;
}

#contenitore_grande {
width:100%;
height: 100%;
position: absolute;
}

#username {
margin-top: 318px;
margin-left: 100px;
width: 172px;
height: 17px;
position: absolute;
z-index: 2;
opacity: 1; /* trasparente = 0.0 */
color: black;
font-size: 100%;
background-color: yellow;
border-style: none;
}

[dreadnaut]

Non vorrei sembra pessimista ma... non c'è molta speranza

Ti conviene separate l'immagine in due: lo sfondo vero e proprio (occhio che è un'illustrazione coperta da copyright), ed il "form di legno" per il log-in. Il form è poi composto da bordi, campi, bottoni etc, ognuno con il suo CSS.

Fare tutto usando immagini così è però una faticaccia che darà risultati così-così. Il mio suggerimento da anziano manovale del web è di partire con qualcosa di più semplice e meno "preciso al pixel".

[reazioneacatena]

ok, grazie, mi terrò quello attuale semplice semplice che fa il suo modesto lavoro.

[dreadnaut]

Se posso aggiungere: appoggiarti all'HTML ti aiuterà ad ottenere più risultati con meno fatica. Ad esempio, dalla tua pagina login.php, puoi sostituire lo script con un semplice attributo autofocus, oppure aggiungere required per i campi sempre necessari:

<span>Username:</span><br>
<input autofocus required class="inserimento_piccolo" style="width: 300px" type="text" name="username"><br><br>
<span>Password:</span><br>
<input required class="inserimento_piccolo" style="width: 300px" type="password" name="password"><br><br>

Un tutorial recente sui form HTML potrebbe renderti la vita più facile 👍