Resize imagen background

[c0w]

Buenas,

tengo el siguiente css:

Código CSS:

.image_border {
  float:left;
  width:175px;
  height:120px;
  border:1px solid #0F1720;
  padding:1px;
  margin:0px 0px 10px 0px;
  background-repeat:no-repeat;
  background-position:center;
  overflow:hidden;
  background-color:#2F4762;
  cursor:pointer;
}
 
.image_border_center {
  float:left;
  width:175px;
  height:120px;
  border:1px solid #0F1720;
  padding:1px;
  margin:0px 6px 10px 6px;
  background-repeat:no-repeat;
  background-position:center;
  overflow:hidden;
  background-color:#2F4762;
  cursor:pointer;
}
 
.image_cont {
  width:175px;
  height:23px;
  background-color:#111111;
  z-index:1;
  filter:alpha(opacity=65);
  -moz-opacity:.65;
  -khtml-opacity:.65;
  opacity:.65;
  clear:both;
  position:relative;
  top:97px;
  left:0px;
}
 
.image_text {
  background-color:transparent; 
  z-index:2;
  position:relative;
  top:80px;
  left:0px;
  font-family:Arial, Helvetica, sans-serif;
  font-weight:bold;
  text-align:center;
}
 
.myweb_check {
  float:left;
  margin:-4px 0px 0px 0px;
}
 

y el div

Código HTML:

<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)">
          <div class="image_cont"></div>
          <div class="image_text"><div class="myweb_check"><input name="" type="checkbox" value="" /></div> Darkside (Verde)</div>
          </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!

[ArturoGallegos]

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:

.Contenedor{border:1px #ccc solid;float:left;position:relative;}
.Contenedor img{width:175px;height:120px;position:absolute;top:0;left:0;z-index:10;}
.Contenedor div{width:175px;position:absolute;top:0;left:0;z-index:20;}
 

Código HTML:

<div class="Contenedor">
<img src="imagen.jpg" alt="imagen" />
<div>Hola mundo Hola mundo Hola mundo Hola mundo </div>
</div>
 

[hey_alan]

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

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

Saludos.

[c0w]

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?

[ArturoGallegos]

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