info sul background css nei vari browser [RISOLTO]

[enricoonofri]

Buon giorno a tutti, anzi buonasera.
Avendo trovato questo articolo sul sito html.it, vorrei capire se ciò che è elencato nella tabella in fondo (vedi immagine allegata) rappresenta il codice da inserire per la corretta visualizzazione nei browser corrispondenti.



body {
background: url('fiore_1024.jpg');
background-repeat: no-repeat;
background-position: 0 0;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}


Se cambio il css in questo modo, aggiungendo le seguenti righe è corretto?



body {
background: url('fiore_1024.jpg');
background-repeat: no-repeat;
background-position: 0 0;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
background-size: 9.0+
background-size: 4.0+
background-size: 5.0+
 }


Per quello che dice in quel sito, la riga di codice -moz-background-size: cover; , ad esempio, include tutte le versioni fino alla 3.6.


E' già sottinteso che per 9.0+ si intendono le versioni dalla 9 in poi di Int Explorer, e dalla 4 in poi di Mozilla ecc..... ?
Oppure come devo indicarle per vederle bene nei vari browser?
Grazie

[tomtomeight]

Da dove saltano fuori le ultime righe che hai aggiunto

background-size: 9.0+
background-size: 4.0+
background-size: 5.0+

Tieni presente che a parità di istruzione viene letta ed applicata sempre l'ultima, per cui, in questo caso varrebbe solo 

background-size: 5.0+

ma ripeto che istruzione è?

[giusebos]

leggi sempre la data degli articoli, nel 2011 la situazione dei browser era completamente differente quindi fai alcune considerazioni:

• in questo momento (siamo nel 2015) tutti i principali browser supportano i css3
• siamo in un momento di transizione, win10 è stato rilasciato con un nuovo browser "microsoft edge" che sembra (quasi) rispettare gli ultimi standard.
• le macchine che hanno installato versioni di EXPLORER 8/9/10 sono relativamente poche rispetto a tutto il parco macchine esistente e queste spesso sono in uso in aziende - banche- enti, gestite quindi da sysadmin che non hanno nessun interesse ad effettuare aggiornamenti di questo tipo, negando spesso la navigazione fuori dalla intranet.
• i privati che hanno un computer tendono ad aggiornare i browser, sopratutto quando le pagine vengono renderizate male
• il codice:

Codice: [Seleziona]

background-size: 9.0+
background-size: 4.0+
background-size: 5.0+
non esiste, da dove lo hai copiato?

quindi se vuoi inserire una immagine di sfondo che si adatti allo schermo senza che questa venga distorta, ovvero si adattera il larghezza eliminando la fascia alta e bassa per i monitor wide o si adatterà in altezza eliminando pezzi di immagine nelle fasce a dx e sx.

le tecniche sono diverse, ma come già ti scrissi in un altro post (forse ti ho dato il link)

questa è una buona tecnica:

lato html, quindi per joomla il file index.php

Codice: [Seleziona]

<div id="bg">
  <img src="images/bg.jpg" alt="">
</div>
mentre per il file css

Codice: [Seleziona]

#bg {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
}
#bg img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  min-width: 50%;
  min-height: 50%;
}
le regole top, left del div #bg  fanno si che l'immagine venga centrata al centro dello schermo top -50 e left -50,
le regole   width: 200% e height: 200%; creano un contenitore grande il doppio dello schermo per sicurezza,
ma le regole del div #bg img fissano le dimensioni dell'immagine, la centrano e la fissano ai bordi dello schermo.

le regole min-width: 50% e min-height: 50% si occupano di adattare le dimensioni dell'immagine al 100% in altezza o in larghezza.

questo codice non funzionerà con ie 8, 9,10.

[giovi]

Da dove saltano fuori le ultime righe che hai aggiunto

background-size: 9.0+
background-size: 4.0+
background-size: 5.0+

Tieni presente che a parità di istruzione viene letta ed applicata sempre l'ultima, per cui, in questo caso varrebbe solo 

background-size: 5.0+

ma ripeto che istruzione è?

ahahaha, sono le versioni minime dei vari browser che supportano questa istruzione. Probabilmente un copia incolla da HTML.it 

[enricoonofri]

Grazie dei consigli!Il file index.php che modifico inserendo il codice html che dice Giusebos, qual'è?
Quello del template che sto utilizzando? in questo caso del t3_blank

[giusebos]

nel caso di utilizzo di un framework bisogna rifarsi alla documentazione perchè spesso hanno uno schema di file diverso dallo standard.

[enricoonofri]

Ecco infatti! Avevo nasato qualcosa...grazie per ora...provo a vedere la documentazione se dice qualcosa in merito alla modifica dell'html e del css in modo da non perdere le modifiche dopo gli aggiornamenti!

[xplosion]

Un aiutino... vedi la cartella "local" dentro il template, a cosa potrebbe servire ? 

[enricoonofri]

Uhm...suggerimenti?

[xplosion]

Uhm...suggerimenti?

...provo a vedere la documentazione

Hai fatto ?

[enricoonofri]

Si ma non capisco quale file modificare per ottenere una immagine di sfondo che si adatta alle varie grandezze dei dispositivi.
Al momento ho inserito il codice seguente nella sezione Custom Code e vedo l'immagine come deve essere, sia su Chrome, su Mozilla, sul cellulare con sistema Android, ma la vedo male su Int Expl.
Il codice che ho messo nella sezione After <Head> è il seguente:



<body style="background-image: url(templates/t3_blank/images/enrico.jpg); no-repeat center center fixed;
background-size:100% 100%;">


Il sito è questo.


Quindi al momento al momento ho lasciato stare il codice che ha detto giusebos perchè non so dove inserirlo in t3_blank e dalla doc non ho capito.
Poi vorrei anche capire, se possibile, come mai se apro le varie pagine dell'articolo "Racconto la mi storia" oppure "Cos'è l'A.TM. mi cambia la visualizzazione, una pagina sembra più zoommata dell'altra" (al di la del fatto che devo cambiare il colore del testo per renderlo più visibile, ma questo è altra cosa)

[xplosion]

Guarda ti ho già datto uno spunto di partenza.
Vedi che nella documentazione di T3 esiste una sezione che si chiama "Isolate template settings and customization", cercala e leggi con attenzione, ti spiega tutto quello che serve.

[enricoonofri]

Ok  allora guardo subito lì! thanks ti faccio sapere e grazie al momento

[enricoonofri]

Vedi allegato, oppure (doc)Si capisce meglio in inglese che in italiano, cmq non riesco a capire se il mio file css con le mie personalizzazioni di background lo devo inserire nel percorso root/templates/t3_blank/local/css,


e soprattutto non capisco che cosa sia quel codice e dove lo debba metttere.
Non è poi così chiaro, anzi per nulla.




// Define CSS file
<stylesheets>
 
    <file>css/custom/your-style.css</file>
 
</stylesheets>

[giovi]

Non ho seguito la guida ne non conosco il componente ma mi sembra che ci sia scritto che devi metterlo nel file local/etc/asset.xml
Ti torna?

[enricoonofri]

Uhm...no...cioè innanzitutto all'interno della cartella local ci sono due cartelle: css e etc.
Dentro etc ce nè un'altra che si chiama layout, al cui interno ci sono 4 file (tutti e 4 sono file .ini e non .xml)
Nella cartella css tutti file .css
Ora, cosa dovrei avere chiaro? Direi proprio nulla.


In generale:
Se una pagina html con l'aggiunta di css per lo sfondo,ad esempio, è semplice da realizzare, come fare invece per integrare un template (in un framework come t3 ad esempio) con del codice css personalizzato o html, perchè la guida non dice: devi creare il css, lo chiami così, e lo metti qui punto e basta!
Poi il css invece lo metti qui!
E così se aggiorni tutti non perdi le modifiche!
Non lo dice! Che guida è se non è chiara! O almeno per me eh!
Scusate lo sfogo! Buona notte!!!

[enricoonofri]

Giovi grazie cmq per l'interesse, spero di ricevere consigli utili anche da te sul problema!

[enricoonofri]

Allora, per quello che ho capito, e non so se ho capito bene dato i risultati.
Io ho creato un file dal nome assets.xml con il seguente codice, e l'ho messo dentro templates/t3_blank/local/etc/assets.xml



// Define CSS file
<stylesheets>
 
    <file>css/custom/custom.css</file>
 
</stylesheets>




Poi ho creato una cartella dato che non c'era (dal nome custom) con all'interno un file chiamato custom.css in cui c'è il seguente codice e l'ho inserita in templates/t3_blank/local/css/custom/custom.css

<body style="background-image: url(templates/t3_blank/images/enrico.jpg); no-repeat center center fixed;
background-size:100% 100%;">


Ora il risultato è quello che vedete nell'immagine allegata.
Cosa sbaglio??

[giusebos]

dal messaggio manca un '<'

[enricoonofri]

é l'ho capito questo, ma dove???