CODEWITHSUNDEEP
htmlcss
geminiCoder
geminiCoder

Reputation: 2906

overlaying text over an image

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

Upvotes: 2

Views: 9678

Answers (3)

Chandrakant
Chandrakant

Reputation: 1981

If you can use image as background instead of <img> tag using css like following example

#bannerText
  {
    background: url("Styles/Banner.jpg") no-repeat center center;
    width: 123px;
    height: 123px;
    text-align: center;
  }

If you don't want to use Position: if you want to use <img> then go with "feeela's" ans

Upvotes: 1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32202

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

Upvotes: 4

feeela
feeela

Reputation: 29932

You have to give the parent element (#banner) a position: relative; to make the absolute position of its child (#bannerText) dependent on the banner position and not on the window border.

Upvotes: 2

Related Questions