Foros del Web » Creando para Internet » CSS »

Resize imagen background

Estas en el tema de Resize imagen background en el foro de CSS en Foros del Web. Buenas, tengo el siguiente css: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código CSS: Ver original .image_border {   float : left ;   width : 175px ;   height ...
  #1 (permalink)  
Antiguo 11/10/2010, 12:52
c0w
 
Fecha de Ingreso: enero-2008
Mensajes: 146
Antigüedad: 9 años, 11 meses
Puntos: 0
Resize imagen background

Buenas,

tengo el siguiente css:

Código CSS:
Ver original
  1. .image_border {
  2.   float:left;
  3.   width:175px;
  4.   height:120px;
  5.   border:1px solid #0F1720;
  6.   padding:1px;
  7.   margin:0px 0px 10px 0px;
  8.   background-repeat:no-repeat;
  9.   background-position:center;
  10.   overflow:hidden;
  11.   background-color:#2F4762;
  12.   cursor:pointer;
  13. }
  14.  
  15. .image_border_center {
  16.   float:left;
  17.   width:175px;
  18.   height:120px;
  19.   border:1px solid #0F1720;
  20.   padding:1px;
  21.   margin:0px 6px 10px 6px;
  22.   background-repeat:no-repeat;
  23.   background-position:center;
  24.   overflow:hidden;
  25.   background-color:#2F4762;
  26.   cursor:pointer;
  27. }
  28.  
  29. .image_cont {
  30.   width:175px;
  31.   height:23px;
  32.   background-color:#111111;
  33.   z-index:1;
  34.   filter:alpha(opacity=65);
  35.   -moz-opacity:.65;
  36.   -khtml-opacity:.65;
  37.   opacity:.65;
  38.   clear:both;
  39.   position:relative;
  40.   top:97px;
  41.   left:0px;
  42. }
  43.  
  44. .image_text {
  45.   background-color:transparent;
  46.   z-index:2;
  47.   position:relative;
  48.   top:80px;
  49.   left:0px;
  50.   font-family:Arial, Helvetica, sans-serif;
  51.   font-weight:bold;
  52.   text-align:center;
  53. }
  54.  
  55. .myweb_check {
  56.   float:left;
  57.   margin:-4px 0px 0px 0px;
  58. }

y el div
Código HTML:
Ver original
  1. <div onclick="window.open('examples/asdasd.gif','mywindow','width=400,height=200,left=200,top=200,screenX=200,screenY=200,resizable=1,scrollbars=0,toolbar=0,location=0,directories=0,status=0,menubar=0')" class="image_border" style="background-image:url(examples/asdasd.gif)">
  2.           <div class="image_cont"></div>
  3.           <div class="image_text"><div class="myweb_check"><input name="" type="checkbox" value="" /></div> Darkside (Verde)</div>
  4.           </div>

El problema es que quiero que la imagen de fondo, sea siempre de 175 x 120 como una imagen normal que le pones height y width, y no lo puedo hacer con <img>, ya que tengo otro objeto ensima y lo taparia.

Mil gracias!
  #2 (permalink)  
Antiguo 11/10/2010, 14:12
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.827
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Resize imagen background

si quieres que el fondo siempre sea de 175x120 porque no haces una imagen de ese tamaño, ademas de que no se puede con CSS (que yo sepa) y te ahorras unos cuantos kb de peso en tu sitio.

ahora bien si de plano no puedes cambiar esa imagen usa por ejemplo:

Código CSS:
Ver original
  1. .Contenedor{border:1px #ccc solid;float:left;position:relative;}
  2. .Contenedor img{width:175px;height:120px;position:absolute;top:0;left:0;z-index:10;}
  3. .Contenedor div{width:175px;position:absolute;top:0;left:0;z-index:20;}
Código HTML:
Ver original
  1. <div class="Contenedor">
  2. <img src="imagen.jpg" alt="imagen" />
  3. <div>Hola mundo Hola mundo Hola mundo Hola mundo </div>
  4. </div>
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #3 (permalink)  
Antiguo 11/10/2010, 21:13
Avatar de hey_alan  
Fecha de Ingreso: diciembre-2006
Ubicación: México
Mensajes: 348
Antigüedad: 11 años
Puntos: 8
Respuesta: Resize imagen background

Podrías tratar de usar algo similar a este método:

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

Saludos.
__________________
Alan Marth Media

Diseño web y Publicidad en Morelia, Michoacán
  #4 (permalink)  
Antiguo 13/10/2010, 15:57
c0w
 
Fecha de Ingreso: enero-2008
Mensajes: 146
Antigüedad: 9 años, 11 meses
Puntos: 0
Respuesta: Resize imagen background

Muchas gracias por la respuesta, pero no pude solucionarlo, intente ponerle el position:relative en este caso ya que se encuentra en otro div, y el z-index y no se superpone una capa de otra.

Como se puede superponer un div sobre otro? o sobre una imagen?
  #5 (permalink)  
Antiguo 13/10/2010, 16:16
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.827
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Resize imagen background

utiliza margenes negativos o las propiedades top, right, bottom, left

si colocas el código que te mostré de ejemplo en un html veras que si funciona
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....

Etiquetas: resize, fondo
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 08:57.