Category Archives: css

Imagen de fondo a pantalla completa

Ponemos como estilo:

body {
  background: url(imagen.jpg) center center cover no-repeat fixed;
}
@media only screen and (max-width: 767px) {
  body {
    background-image: url(imagenmaspeque.jpg);
  }
}

Y como código de la pagina:

Todo lo que tengas que poner.

El resultado seria:

Todo lo que tengas que poner

Tabla responsive hasta cierto tamaño

Tenemos una tabla formada por varias imágenes, queremos que las imágenes se reduzcan a medida que la pantalla disminuye, pero a partir de un determinado tamaño no queremos que se reduzcan mas,sino que salten de linea:

La tabla podría ser:

<table id="opcionesinicio">
				<tr>
					<td>
						<img src="http://placehold.it/300x300" class="img-responsive"/>
					</td>
					<td>
						
						<img src="http://placehold.it/300x300"  class="img-responsive"/>
					</td>
					<td>
						
						<img src="http://placehold.it/300x300"  class="img-responsive"/>
					</td>
					<td>
						<img src="http://placehold.it/300x300"  class="img-responsive"/><br />
						
					</td>
					<td>
						<img src="http://placehold.it/300x300"  class="img-responsive"/><br />
						
					</td>
					<td>
						<img src="http://placehold.it/300x300"  class="img-responsive"/><br />
						
					</td>
					<td>
						<img src="http://placehold.it/300x300"  class="img-responsive"/><br />
						
					</td>
				</tr>
			</table>

Tal y como está sin css el resultado seria:

responsive1

Ahora añadimos el css para hacerlo responsive:

#opcionesinicio{
    width:100%
}
 .img-responsive  {
           max-width: 100%; 
           width: auto;  
       }

Y el resultado es:
responsive2

Pero si la pantalla es muy pequeña las imagenes apenas se ven.
responsive3

Aqui es donde añadimos el codigo para que a partir de un tamaño la tabla se rompa

@media screen and (max-width:500px){
    
    #opcionesinicio td{
         float:left;
    }
}

responsive4

El resultado completo se puede ver en:

https://jsfiddle.net/18ko3yu8/