Ancho y alto al 100% de una foto

ErikaR · #1 (**permalink**) 13/05/2013, 13:13

hola,

como se hace para poner en un div una foto al 100 % en ancho y alto?
para que se adapte al monitor

es decir tengo una botonera con el logo en forma horizonatal, de fondo en el area de contenido queria poner una foto que ocupe todo el area del mismo

en css3

gracias
erika

pzin · #2 (**permalink**) 13/05/2013, 13:33

Deberías de aportar algo de código, porque dependiendo del caso puede ser que necesites algo más. Pero en principio podrías usar background-size:

Código CSS:

Ver originaldiv {
  background-image: url(fotochula.png);
  background-size: cover
}

ErikaR · #3 (**permalink**) 13/05/2013, 14:03

Hola Pzin

te copio codigo, primero del html, despues del css

La foto escalable iria en DIV CONTENIDO

con Z-INDEX PUSE #textohome, PARA QUE VAYA POR ARRIBA DEL DIV CONTENIDO

<body>

<div id="encabezado">

<div id="logo" > <a href="index.html"><img src="images/claudia-solari-soluciones-editoriales.gif" alt="claudia solari soluciones editoriales" ></a></div>
</div>

<div id="navegacion">

<div id="menu" >

<ul>
<li><a class="enlace" href="servicios.html">SERVICIOS</a></li>
<li ><a class="enlace" href="portfolio.html">PORTFOLIO</a></li>
<li><a class="enlace" href="clientes.html">CLIENTES</a></li>
<li ><a class="enlace" href="contacto.html">CONTACTO</a>
</ul>

</ul>

</div>

</div>

<div id="contenido">

</div>

<div id="textohome">

</div>

</body>

CSS

@charset "utf-8";
/* CSS Document */

* {
margin:0px;
padding:0px;
}

a, a img { border:none; outline: none;}

#encabezado {
background-color:#Fff;

height:59px;
margin:auto;
}
#navegacion {
background-color: #353535;

height:15px;
margin:auto; /* centtrado */
}
#contenido {
background-image:url(images/home.jpg);
background-size: cover;

}

#logo {
width:270px;
height:58px;
float:left;
border:none;
}

#menu {
margin:auto; /* centtrado */
height:15px;
width:600px;

}

#menu li {

margin:auto; /* centtrado */
height:15px;
list-style-type:none;
text-align:center;
float:left;
padding-left:80px;
list-style-type:none;

}

#textohome {
width:462px;
height:200px;
border:none;
background-color: #fff;
margin:auto; margin-top:133px;
z-index:2;
}

GRACIAS!!

pzin · #4 (**permalink**) 13/05/2013, 14:08

Usa highlight o code para poner código.

Bueno, ¿y no te funciona ya? No sé qué es lo que quieres que ocupe. Si quieres que ocupe otra cosa que no sea #contenido, pues ponlo de fondo de lo que quieres que ocupe.

ErikaR · #5 (**permalink**) 13/05/2013, 15:48

Hola,

no se ve el jpg de fondo en el div contenido

gracias
erika

pzin · #6 (**permalink**) 13/05/2013, 16:56

¿Pero ese div tiene alguna altura? Es que tal cual está en el código, la altura es igual a cero porque no hay contenido dentro del div. Tendrías que especificar una altura si va sin contenido usando height.

ErikaR · #7 (**permalink**) 13/05/2013, 18:10

Hola Pzin

le agrego height y se ve la foto
solo que como le pongo 100%?
le puse 500px para probar, depende el monitor se vera una franja blanca, que es lo que no queria

gracias
erika

pzin · #8 (**permalink**) 13/05/2013, 18:25

Si necesites una medida relativa, ten en cuenta que relativa significa relativa a algo. Si pones 100%, tendrás la misma altura que su contenedor.

Si lo que quieres es que ocupe la altura de la pantalla, lo suyo sería aplicar el fondo a body, ¿no?

ErikaR · #9 (**permalink**) 13/05/2013, 18:40

Hola Pzin

Subo el html porque me parece va a ser mas facil
Mira:http://www.erikarubaja.com.ar/claudi...01/index4.html

fijate que la foto de los libros queria cubra toda la sup hasta abajo, se ve una franja blanca

gracias
erika

pzin · #10 (**permalink**) 13/05/2013, 18:56

Yo pondría ese fondo en el body.

Pero bueno, también se puede hacer desde ahí. Primero, como es relativo al elemento padre, el elemento padre también tiene que ocupar el 100%, que, a su vez, también tiene que ocupar el 100% del elemento padre. Los padres son body y html. Así que estos tienen que tener una altura de 100%:

Código CSS:

Ver originalhtml, body {
  height: 100%;
}

Ahora sólo hay que poner ese elemento también con una altura de 100%, pero como tienes la cabecera y el menú arriba, que miden 59 y 15 pixeles respectivamente, hay que restárselos a esa altura (ya que si no #contenido crearía un scroll de 59+15 pixeles). Para esto puedes usar calc() tal que:

Código CSS:

Ver originaldiv#contenido {
  height: calc(100% - 59px - 15px);
}

ErikaR · #11 (**permalink**) 13/05/2013, 19:23

Hola Pzin

Si funciono!
Ahora sabes que en safari de mac no se ve la imagen de fondo del DIV CONTENIDO
Se te ocurre algun codigo para agregar?...

gracias!
erika

pzin · #12 (**permalink**) 13/05/2013, 20:23

Yo la veo bien en la URL con Safari/Mac.

madman_18 · #13 (**permalink**) 14/05/2013, 01:54

¿Y no podrías usar un plugin de jQuery? Yo suelo usar uno que se llama http://vegas.jaysalvat.com/ que te adapta la imagen que quieras de fondo a la resolución de la pantalla.
Si lo quieres en un div, te aconsejo usar backstretch (creo que se escribe así)

Quizás te sea útil.

Un saludo.