escalar imagen a lo ancho en CSS

elpese80 · #1 (**permalink**) 18/02/2010, 07:52

Buenas, vereis, tengo una imagen como background en un CSS de esta forma:

.menuList a {
position: relative;
background: #F0F0F0 url('/images/sombra.png') no-repeat bottom right;
border-top:1px solid #FFFFFF;
color: #000000;
display: block;
margin: 0;
padding:10px;
text-decoration: none;
font-size: 12px;

}

Lo que quiero conseguir es que la imagen se muestre entera y que , al agrandar o empequeñecer el navegador a lo ancho, la imagen tambien se escale a lo ancho, no a lo alto.
No se me ocurre nada. He probado con width=100% y no funciona.

Gracias de antemano
Alguien podria ayudarme?

maycolalvarez · #2 (**permalink**) 18/02/2010, 10:23

tengo entendido que CSS no escala imágenes, solo lo puedes lograr con <img />

más info: http://www.bigbaer.com/css_tutorials...l.tutorial.htm

Calizman · #3 (**permalink**) 18/02/2010, 11:27

Saludos!

Echale un ojo a esta página, a ver si te sirve:

http://www.cssplay.co.uk/layouts/background.html

Hasta Luego!

-- El mensaje original está aqui. Gracias JavierB

maycolalvarez · #4 (**permalink**) 18/02/2010, 11:44

@Calizman Excelente truco

Calizman · #5 (**permalink**) 18/02/2010, 11:51

El PsicoModerata JavierB lo publicó primero... Yo solo hice un Re-Post!

bibi1979 · #6 (**permalink**) 02/11/2010, 08:00

Hola a todos, pues estoy intentando aplicar el background para que se escale según la pantalla y mirando el código de la web que habeis posteado, pero no consigo entender como hacerlo, alguien que me lo explique a lo fácil??

Un saludete y gracias de antemano!!

bibi1979 · #7 (**permalink**) 02/11/2010, 08:19

aaaa, ya está, al final era más facil de lo que pensaba. He hecho esto:

Pongo la imagen dentro del <body>

img#fondo {
width:100%; // todo el largo del navegador...
height:100%; // todo el alto del navegador...
position:absolute; // tendrá una posición absoluta...
top:0; // comienza arriba del todo...
left:0; // y a la izquierda del todo...
overflow:hidden; // ocultamos lo sobrante por si las dudas...
}

<body>
<img id="fondo" src="fondo.jpg" />
shalalalala
</body>

Gracias igualmente

k4tana · #8 (**permalink**) 01/12/2010, 05:49

Cita:

Iniciado por bibi1979

aaaa, ya está, al final era más facil de lo que pensaba. He hecho esto:

Pongo la imagen dentro del <body>

img#fondo {
width:100%; // todo el largo del navegador...
height:100%; // todo el alto del navegador...
position:absolute; // tendrá una posición absoluta...
top:0; // comienza arriba del todo...
left:0; // y a la izquierda del todo...
overflow:hidden; // ocultamos lo sobrante por si las dudas...
}

<body>
<img id="fondo" src="fondo.jpg" />
shalalalala
</body>

Gracias igualmente

Creo que llego un poco atrazado para esto , pero lo que haces en este caso es poner una imagen no cierto ? pero como lo harias para el background , ya que eso me pone una imagen normal y no en background .. muchas gracias .

Calizman · #9 (**permalink**) 01/12/2010, 09:30

Hola K4tana!

La idea es que ese <img> funcione como fondo. Porque no haces unas pruebas con ese codigo y lo pruebas personalmente.

Hasta Luego!