Image Replacement non responsive su mobile e tablet

[Fbros83]

Ciao, ho un problema con la visualizzazione di questo sito: http://www.wecastudio.it su dispositivi mobili.

La prima immagine che vedete, sulla quale è stato fatta un replacement da testo h1, non risulta responsive ne su tablet ne su cellulare.

Il codice html è il seguente:

<div class="v-content">
<div class="container">
<h1 class>ciao</h1>
</div>
</div>

il css invece è questo:

h1 {
letter-spacing: 3px;
font-size: 10em;
color: transparent;
background: url(../images/logo.jpg) no-repeat center;
max-width: 100%;
height: auto;
display: block;
overflow: hidden;
}
@media (max-width: 100%) {
h1 {
font-size: 3em;
}
}

sui browser da notebook e pc desktop funziona benissimo ma su cellulare e tablet no. Le ho provate tutte (impostando @media max-width anche a 200px) ma non riesco a capire dove sbaglio.

Grazie in anticipo per una cortese risposta.

Fabio

[ResianTaxidrive]

Penso che dovresti agire sulla background-size e metterla a qualche percentuale.

[Fbros83]

Penso che dovresti agire sulla background-size e metterla a qualche percentuale.

Intanto grazie mille per la risposta, che è stata utilissima!

Ho risolto così:

h1 {
letter-spacing: 3px;
font-size: 10em;
color: transparent;
background: url(../images/logo.jpg) no-repeat center;
max-width: 100%;
height: auto;
display: block;
overflow: hidden;
}
@media (max-width: 600px) {
h1 {
letter-spacing: 3px;
font-size: 4em;
color: transparent;
background: url(../images/logo.jpg) no-repeat center;
background-size: 100%
}
}

Grazie ancora!!!!

[ResianTaxidrive]

Fai attenzione a qualche vecchio browser (vedi IE8) che non recepisce la background-size. Potresti in alternativa inserire l'immagine direttamente nell'html e poi dare una percentuale alla dimensione dell'immagine.

[jimbo0]

infatti.. forse mi sbaglio, ma non credo che l'image replacement per h1 (ossia per utilizzo logo o titolo pagina) serva più a molto per fini SEO.