Question

Im just getting in to web dev (mainly an iOS, Java, c# programmer). I have a simple problem bt it is anoying.

<div id="banner">
    <img src="Styles/Banner.jpg" alt="banner" />
   <div id="bannerText">
    User ID
    </div>
</div>

I have a banner which is a simple image (.jpg) and I want to overlay some text. The problem is positioning the text over the banner. I dont realy want to use apsolute positioning. I would like to have both the image and the text centered. The problem is I ony seem to be able to overlap the text over the image when using apsolute positioning, which will be effected if the window is resised. Whats the best/simplist way to do this.

---

Just Like to thank all of you for being so helpful. GC

Answer 1

Live demo

Hey now i think you should want to this

HTML

<div id="banner">
    <img src="http://rapidgator.net/images/pict-download.jpg" alt="banner" />
   <div id="bannerText">
    User ID
    </div>
</div>

Css

#banner{
position:relative;
  background:green;
  padding:10px;
}
img{
vertical-align:top;
}
#bannerText{
position:absolute;
  top:20px;
  left:10px;
  background:red;
}

Demo