Question

I’m having trouble trying to put some text and button over a large image.
I’ve managed to do a partial solution with CSS, but my problem is, whenever i make the browser window smaller, the size of the text + button does not scale down with the image… and this makes everything pretty ugly.

Is there some (easy) solution for that?

My CSS:

titleImageDiv { 
  position: relative; 
  width: 100%; /* for IE 6 */
}

#titleImageCaption { 
  position: absolute; 
  top: 10%;
  left: 2%;
}

#titleImageButton { 
    position: absolute;
    top: 75%;
    left: 2%; 
}

My HTML

<div class='row'>
  <div class='span12' id='titleImageDiv'>
    <img alt='Image' src='/assets/my_caption_pic.jpg'>
    <h1 id='titleImageCaption'>SOME CAPTION</h1>
    <form action="/someaction class="button_to" method="post">
      <div>
      <input class="btn btn-large" id="titleImageButton" type="submit" value="PRESS COOL BUTTON!" />
      </div>
    </form>
</div>

Answer 1

Try using media queries…. FOr example:TThis CSS will apply if the viewing area is smaller than 600px.

@media screen and (max-width: 600px) {
  #titleImageDiv { ..}

#titleImageCaption { }

#titleImageButton { }

}

You can make use of different queries with different css….
hope following link helps you…http://webdesignerwall.com/tutorials/css3-media-queries