Foros del Web » Creando para Internet » CSS »

escalar imagen a lo ancho en CSS

Estas en el tema de escalar imagen a lo ancho en CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 18/02/2010, 07:52
 
Fecha de Ingreso: noviembre-2009
Mensajes: 5
Antigüedad: 8 años
Puntos: 0
escalar imagen a lo ancho en CSS

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?
  #2 (permalink)  
Antiguo 18/02/2010, 10:23
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 9 años, 4 meses
Puntos: 1530
Respuesta: escalar imagen a lo ancho en CSS

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
  #3 (permalink)  
Antiguo 18/02/2010, 11:27
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: escalar imagen a lo ancho en CSS

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
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #4 (permalink)  
Antiguo 18/02/2010, 11:44
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 9 años, 4 meses
Puntos: 1530
Respuesta: escalar imagen a lo ancho en CSS

@Calizman Excelente truco
  #5 (permalink)  
Antiguo 18/02/2010, 11:51
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: escalar imagen a lo ancho en CSS

El PsicoModerata JavierB lo publicó primero... Yo solo hice un Re-Post!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #6 (permalink)  
Antiguo 02/11/2010, 09:00
 
Fecha de Ingreso: septiembre-2009
Mensajes: 21
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: escalar imagen a lo ancho en CSS

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!!
  #7 (permalink)  
Antiguo 02/11/2010, 09:19
 
Fecha de Ingreso: septiembre-2009
Mensajes: 21
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: escalar imagen a lo ancho en CSS

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
  #8 (permalink)  
Antiguo 01/12/2010, 05:49
 
Fecha de Ingreso: abril-2009
Mensajes: 4
Antigüedad: 8 años, 7 meses
Puntos: 0
Respuesta: escalar imagen a lo ancho en CSS

Cita:
Iniciado por bibi1979 Ver Mensaje
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 .
  #9 (permalink)  
Antiguo 01/12/2010, 09:30
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: escalar imagen a lo ancho en CSS

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!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter

Etiquetas: ancho, escalar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:47.