Salve ragazzi, scusate l'intromissione e la riapertura dell'argomento, qualcuno saprebbe spiegarmi come modificare il file per inserire differenti immagini alle differenti risoluzioni?
se non ho capito male questa è la parte che punta al file immagine:
.logoheader {
background: url(../images/personal/personal2.png) no-repeat right
bottom #0C1A3E;
color: #FFFFFF;
min-height: 250px;
}
Mentre questa stabilisce che la stessa immagine con le stesse dimensioni (non ne varia la grandezza) viene usata per visualizzazioni superiori a 480 px:
@media only screen and (max-width: 480px) {
img {
max-width: 100%;
height: auto;
border: 0;
-ms-interpolation-mode: bicubic;
}
#fontsize{display:none}
#nav,#wrapper2,#wrapper,.cols-3 .column-1,.cols-3 .column-2,.cols-3 .column-3,#right,.box,#header form
{
float: none;
width: 100%
}
#header {padding-top:3em}
#header form {margin:0}
.logoheader {background:#0C1D43; min-height:100px; margin:0}
.box {
border-left: 0 !important;
border-bottom: solid 1px #ddd;
}
#line {
text-align: center;
top: 0;
right: auto;
max-width: 100% ;
min-width:100%;
margin: 0 0px; background:#095197;
}
#header form input {
float: none; margin-bottom:4px
}
#menuwrapper { margin-top:10px; }
#header ul.menu {position:relative; top:0;left:20px; right:20px; margin:0; width:90%; border-radius:4px}
#header ul.menu li:first-child a {border-radius: 4px 4px 0 0}
#header ul.menu li:last-child a {border-radius:0 0 4px 4px }
#header ul.menu li a:link,
#header ul.menu li a:visited {
display: block;
padding: 6px 10px;
border-bottom: solid 1px #ccc
}
}
Ore per inserire immagini differenti basta creare altre .logoheader tipo:
.logoheader1 {
background: url(../images/personal/personal2_telefono.png) no-repeat right
bottom #0C1A3E;
color: #FFFFFF;
min-height: 250px;
}
ed inserire una nuova routin @media only screen and (max-width: 480px) con al posto di 480px una differente risoluzione e lasciare invariato il resto o la cosa è più complessa?
Grazie per le dritte!