[RISOLTO] HEADER per schermo 16:9

[andmicci]

Salve a tutti,
come da titolo vorrei allungare l'header del mio sito rendendolo adatto anche agli schermi 16:9 sui quali viene visualizzato invece più' stretto in quanto adatto agli schermi quadrati (4:3).
Come devo fare? Ho paura che se creo un'immagine di dimensioni semplicemente più' lunghe, connettendomi su un 4:3 verrebbe visualizzta tagliata... esiste un metodo che riconosca le dimensioni del monitor dell'utente e adatti le dimensioni dell'header allo stesso?


Grazie

[tomtomeight]

Non sono le dimensioni dei monitor e nemmeno i formati da tenere in considerazione ma solo la risoluzione, se metti un header da 1024 dovresti andar bene nella maggioranza dei casi perche spesso la risoluzione maggiormente utilizzata è di circa 1094 x nnn. In alternativa devi utilizzare, ma sconsigliato, un template fluido oppure estensioni di autoresize.

[andmicci]

1024intendi la lunghezza in pixel? Il mio header dovrebbe essere intorno ai 1000 ma la cosa non cambia. I vorrei che prendesse tutta la lunghezza di ogni monitor e non solo quella del body che e' identica.
Ci sono siti che aprendoli sul 16:9 visualizzano il body al centro dello schermo mentre come header c'ė un'immagine che copre tutta la lunghezza del monitor.


Per esempio: il mio sito e un altro sito che parla di me che in alto porta un una immagine nera contenente il menù.   Ecco io vorrei ricreare sul mio sito un effetto simile.
Grazie

[giusebos]

Ok ti serve solo quella striscia che vada da parte a parte a prescindere dalla risoluzione del modulo.
Se così inserisci il link del sito dove vuoi apportare questa modifica (presumo il tuo ma non lo dichiari).

[adottauncane]

Ciao andmicci,
vediamo se ho capito cosa vuoi...

correggi così qui:

Codice: [Seleziona]

body#stylef1, body#stylef2, body#stylef3, body#stylef4, body#stylef5, body#stylef6, body#stylef7, body#stylef8, body#stylef9, body#stylef10, body#stylef11, body#stylef12, body#stylef13, body#stylef14, body#stylef15, body#stylef16 {    background-attachment: scroll;    background-clip: border-box;    background-color: #FFFFFF;    background-image: url("../images/metal/header_bg.jpg");    background-origin: padding-box;    background-position: left top;    background-repeat: no-repeat;    background-size: 100% 150px;    color: #555555;}metal.css riga 15

naturalmente metti l'immagine che vuoi e anche l'altezza in px che vuoi...

e togli la riga background da qui:

Codice: [Seleziona]

#header {    background: url("../images/metal/header_bg.jpg") no-repeat scroll left top #212121;}metal.css (riga 39)

[andmicci]

X giusebos

Si il sito in questione e' il mio

Grazie

[andmicci]

non ho ben capito una cosa,
seguendo le istruzioni di adottauncane ed avendo io un'immagine lunga diciamo 1000px e volendo porre prima e dopo l'immagine una striscia nera della stessa altezza dell'immagine attuale...come devo effettuare la modifica?

[adottauncane]

Per fare questo ti basta sosituire questa immagine background.jpg con un'immagine larga 1px e alta quanto ti serve e poi mettere repeat-x left top

Codice: [Seleziona]

body#stylef1, body#stylef2, body#stylef3, body#stylef4, body#stylef5, body#stylef6, body#stylef7, body#stylef8, body#stylef9, body#stylef10, body#stylef11, body#stylef12, body#stylef13, body#stylef14, body#stylef15, body#stylef16 {    background: url("../images/metal/background.jpg") repeat-x scroll left top #FFFFFF;    color: #555555;}metal.css (riga 15)

e lasci l'immagine dell'header dov'è.

[andmicci]

ho appena eseguito le tue istruzioni...non l'ultima ma quella di qualche giorno fa...ma non credo di essermi spiegato bene...guarda il risultato

[adottauncane]

Sì ho capito dopo cosa ti serviva. Prova con l'ultima.

[andmicci]

guarda adesso...ho inserito un'immagine lunga 3000px ma non capisco perché al centro mi ci incolla su un pezzo della stessa

[adottauncane]

Perché dentro l'header hai rimesso la stessa immagine...

[andmicci]

aspetta...sto facendo confusione...quella immagine che vedi e' solo dentro l'header...ma solo ora ho letto che dovevo inserirla dentro background giusto?...ed in questo caso come faccio ad averle entrambe cioè l'Header e bkgrnd? Guarda a me basta averne una purché' copra tutto il mio schermo 16 9


essendo l'header un file jpg non posso renderlo trasparente

[adottauncane]

No è anche qui:metal.css (riga 15)

Codice: [Seleziona]

body#stylef1, body#stylef2, body#stylef3, body#stylef4, body#stylef5, body#stylef6, body#stylef7, body#stylef8, body#stylef9, body#stylef10, body#stylef11, body#stylef12, body#stylef13, body#stylef14, body#stylef15, body#stylef16 {    background-attachment: scroll;    background-clip: border-box;    background-color: #FFFFFF;    background-image: url("../images/metal/header_bg.jpg");    background-origin: padding-box;    background-position: left top;    background-repeat: no-repeat;    background-size: 100% 150px;    color: #555555;}
Ma esattamente cosa vuoi fare?

[andmicci]

mi serve un header grande come l'immagine che vedi in background ma senza la seconda immagine incollata sopra

[adottauncane]

Semplicemente toglila dall'header

#header {    background: url("../images/metal/header_bg.jpg") no-repeat scroll left top #212121;}togli tutta la riga

[adottauncane]

Qui

metal.css (riga 39)

Codice: [Seleziona]

#header {    background: url("../images/metal/header_bg.jpg") no-repeat scroll left top #212121;}

[andmicci]

noon va bene perché se scrivo sull'immagine background quello che c'era sull'header a seconda del monitor che uso per visualizzarlo (credo) accorcia o allunga l'immagine e quindi contrae o meno le lettere....oppure ho semplicemente inserito una lunghezza in px eccessiva per l'immagine in bckgrnd?


non so che fare il risultato finale dovrebbe essere come quello visualizzato senza il disturbo sulle dimensioni dei caratteri

[adottauncane]

Allora così:

Codice: [Seleziona]

body#stylef1, body#stylef2, body#stylef3, body#stylef4, body#stylef5, body#stylef6, body#stylef7, body#stylef8, body#stylef9, body#stylef10, body#stylef11, body#stylef12, body#stylef13, body#stylef14, body#stylef15, body#stylef16 {    background-attachment: scroll;    background-clip: border-box;    background-color: #FFFFFF;    background-image: url("../images/metal/background.jpg");    background-origin: padding-box;    background-position: center top;    background-repeat: no-repeat;    color: #555555;}metal.css (riga 15)

[andmicci]

adotta un cane sei un grande!!!

...tutto come volevo ...adesso che conosco la strada sceglierò l'immagine migliore e la pubblicherò

grazie mille!!!