Impostare layout e forme particolari CSS (era: separare due div)

[merovese]

Le dimensioni dell'immagine sono irrilevanti dal momento che questa, per effetto del "cover", viene "scalata" automaticamente per riempire totalmente il contenitore.

Bisogna capire come stai applicando il "background-position"; posso pensare che tu non lo stia facendo nel modo corretto o che ci sia qualcos'altro che disturbi.

Se la pagina è accessibile pubblicamente online, posta il link.

http://www.futuralogtomao.it/tries

come vedi le immagini a volte risultano tagliate proprio in quello che per me è il soggetto principale

[KillerWorm]

Ho visto ma, allo stato attuale, vedo anche che al div .banner hai applicato questa regola:

.banner {
    height: 370px;
    background-image: url(immagini/immagini/1.jpg);
    background-position: right;
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: #fff;
    filter: opacity(80%) blur(0.5px);
}

dove non vedo né il "cover" né il "center"

Fammi capire.
Hai provato ad applicarli?
Hai capito come applicarli?

[merovese]

si stavo effettuando delle prove, li cambio subito

[merovese]

fatto! impostato, sia il "cover" che il "center"

[KillerWorm]

Bene, ma il problema non è che ti taglia l'immagine, suppongo solo che tu voglia "centrare" meglio il soggetto.
E' chiaro che l'ideale sarebbe avere delle immagini in cui il soggetto resti più o meno centrale, nel tuo caso invece il camion risulta tagliato nella parte alta perché nell'immagine è posto più in alto rispetto al centro.

E' questo il problema?

Nel caso puoi "spostare" il punto di riferimento modificando adeguatamente la proprietà background-position.

Prova così:

background-position: center 35%;

Il primo valore "center" è riferito all'asse orizzontale, mentre il secondo "35%" é riferito all'asse verticale. Tieni conto che "50%" equivale a "center".

Prova eventualmente a giocare con quel valore per ottenere la posizione voluta.

Tieni conto che in tal caso dovrai usare presumibilmente dei valori specifici per ogni immagine che andrai ad inserire, in modo da "centrare" ogni relativo soggetto.

Fai sapere se è ciò che intendevi.

[merovese]

Bene, ma il problema non è che ti taglia l'immagine, suppongo solo che tu voglia "centrare" meglio il soggetto.
E' chiaro che l'ideale sarebbe avere delle immagini in cui il soggetto resti più o meno centrale, nel tuo caso invece il camion risulta tagliato nella parte alta perché nell'immagine è posto più in alto rispetto al centro.

E' questo il problema?

Nel caso puoi "spostare" il punto di riferimento modificando adeguatamente la proprietà background-position.

Prova così:

background-position: center 35%;

Il primo valore "center" è riferito all'asse orizzontale, mentre il secondo "35%" é riferito all'asse verticale. Tieni conto che "50%" equivale a "center".

Prova eventualmente a giocare con quel valore per ottenere la posizione voluta.

Tieni conto che in tal caso dovrai usare presumibilmente dei valori specifici per ogni immagine che andrai ad inserire, in modo da "centrare" ogni relativo soggetto.

Fai sapere se è ciò che intendevi.

Si, proprio quello che intendevo! ora mi metto a giocare con le percentuali e andiamo avanti. grazie.
ti rubo un secondo per un'altra cosa, ovviamente quando apro il sito da device mobile, è un casino pazzesco, tempo fa parlavamo sommariamente di impostare delle misure fisse al disotto delle quali il sito non sarebbe andato, ma avrebbe del tutto cambiato faccia...mi dai ulteriori info per piacere

[merovese]

altra stupida ma strana cosa, ho aggiunto al logo in alto a sx il link alla index, però come puoi vedere non è tutto cliccabile, ma solo una parte, come mai?

[KillerWorm]

tempo fa parlavamo sommariamente di impostare delle misure fisse al disotto delle quali il sito non sarebbe andato, ma avrebbe del tutto cambiato faccia...mi dai ulteriori info per piacere

Per ora ti do giusto qualche info al volo.
Si parla di layout responsive; vanno impostate delle media query CSS per stabilire dei cosiddetti "breakpoint" per i quali andrai a definire le opportune regole da applicare sui vari elementi in modo che si "ridistribuiscano" come meglio pensi per le relative dimensioni del viewport.

Questi giorni sono impegnato, magari fai qualche ricerca per il momento così da avere un'infarinatura sull'argomento.

altra stupida ma strana cosa, ho aggiunto al logo in alto a sx il link alla index, però come puoi vedere non è tutto cliccabile, ma solo una parte, come mai?

Perché bar-block e sovrapposto al logo.

Puoi risolvere applicando uno z-index al logo, ad esempio:

.logo {
    position: absolute;
    z-index: 100;
   /* resto del codice */
}

PS: occhio quando apporti delle modifiche, vedo che qualcosa si è sfasciato a livello di HTML. Controlla sempre sul validatore.

[merovese]

.logo {
    position: absolute;
    z-index: 100;
   /* resto del codice */
}

bocciato, mi fa vedere tutta la parte nascosta del logo, quindi tra i due mali preferisco il minore.

PS: occhio quando apporti delle modifiche, vedo che qualcosa si è sfasciato a livello di HTML. Controlla sempre sul validatore.

sinceramente non capisco l'errore, mi da errore su un link whatsup mi dice che c'è un <p> già aperto, ma non lo vedo

[KillerWorm]

parte nascosta!? .. ho capito ma una soluzione si trova sempre, magari puoi realizzare il logo in png con fondo trasparente; so che puoi farcela, non è così complicato.

sinceramente non capisco l'errore, mi da errore su un link whatsup mi dice che c'è un <p> già aperto, ma non lo vedo

Controlla bene tutti i vari tag, se necessitano di apertura e chiusura assicurati che ci siano. Se vuoi ti indico esattamente dove stanno gli errori ma so che puoi farcela anche da solo

Fai sapere