Visualizzazione risultati 1 fino 7 di 7

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

  1. #1
    reazioneacatena non è connesso Utente Blog
    Data registrazione
    20-11-2023
    Messaggi
    3

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

    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.

  2. #2
    lucafornaciarifotografie non è connesso Utente AlterBlog
    Data registrazione
    25-01-2021
    Messaggi
    127

    Predefinito

    Puoi usare delle media query

  3. #3
    L'avatar di dreadnaut
    dreadnaut non è connesso Super Moderatore
    Data registrazione
    22-02-2004
    Messaggi
    6,231

    Predefinito

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

  4. #4
    reazioneacatena non è connesso Utente Blog
    Data registrazione
    20-11-2023
    Messaggi
    3

    Predefinito

    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:
    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;
    }

  5. #5
    L'avatar di dreadnaut
    dreadnaut non è connesso Super Moderatore
    Data registrazione
    22-02-2004
    Messaggi
    6,231

    Predefinito

    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".

  6. #6
    reazioneacatena non è connesso Utente Blog
    Data registrazione
    20-11-2023
    Messaggi
    3

    Predefinito

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

  7. #7
    L'avatar di dreadnaut
    dreadnaut non è connesso Super Moderatore
    Data registrazione
    22-02-2004
    Messaggi
    6,231

    Predefinito

    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:

    Codice HTML:
    <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 👍

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •