0

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?

Community
  • 1
  • 1
Koala7
  • 1,340
  • 7
  • 41
  • 83
  • Why exactly do you want to get rid of the CSS `background-image` property and use an `` tag -- do you need to render a different image chosen dynamically? In this case, you could generate the `style` attribute of the div dynamically? – froddd Sep 17 '12 at 10:41
  • No actually no, i am asked to do that using javascript... Is that possible? how would you do that? – Koala7 Sep 17 '12 at 10:56

1 Answers1

1

For IMG write like this:

.home img{
  position:fixed;
  width:100%;
  height:auto;
}
sandeep
  • 91,313
  • 23
  • 137
  • 155