Question

Possible Duplicate:
Set size on background image with CSS?

I need to find a solution on how to get the same effect of the background image i have achieved here but using the image tag. In other words i probably need to use Javascript to do that, but i am not finding any solution suitable.

Here the Html of my body in the example page.

     <div id="contacto">

       <div class="home">

       </div>     

  </div>

The CSS is the following:

  #contacto {
  background-image: url("../img/barcelona-buildings.jpg");
  background-attachment: fixed;
  background-position: center 965px;
  height: 350px;
  width: 100%;
  margin-top: 75px;
  box-shadow: 2px 1px 6px 0 #888888 inset;
  -moz-box-shadow: 2px 1px 6px 0 #888888 inset;
  -webkit-box-shadow:  2px 1px 6px 0 #888888 inset;
}


.home {
    overflow: hidden;
    z-index: 1;
}

Right now but i want to delete background-image: url("../img/barcelona-buildings.jpg"); in the CSS and using <img src="../img/barcelona-buildings.jpg" alt=""> inside the div class="home" with Javascript automatically resize the img regarding width of the display

Is it possible? How can i achieve it?

Answer 1

For IMG write like this:

.home img{
  position:fixed;
  width:100%;
  height:auto;
}