CODEWITHSUNDEEP
htmlcss
ceth
ceth

Reputation: 45295

Positioning text on the image

I have a image centered on the screen. I need to display some text above the image and I want to set the text coordinates relative to image.

If a user have a different resolution:

I have tried:

<style type="text/css">
    #l1 {
       position: relative;
       left: 20px;
       top: 30px;
       color: #03C;
    }
</style>


<div align="center">
    <div id="l1" align="left">
       some
   </div>
 <img src="some.jpg" width="1024" height="788" />
</div>

But it doesn't work. How can I achieve my goal?

Upvotes: 2

Views: 121

Answers (2)

Moin Zaman
Moin Zaman

Reputation: 25445

I would do it like this:

<!doctype html>
<html>
<head>
    <title></title>
    <style type="text/css">
        /*reset default margins, paddings, set body font*/
        html,body,h1,h2,h3,h4,h5,p,ul,li,form,button { margin:0; padding:0 }
        body { font:normal 62.5% tahoma }

        #my-image { 
            width:1024px; height:788px; 
            background:url(some.jpg); /* use image as background */
            margin:0 auto; /* this centers the div in the browser horizontally */
            position:relative; /* set positioning context for children */
        }

        #my-text { 
            position:absolute; 
            left:0px; top:0px; /* left and top are with respect to the parent div */ 
        }
    </style>
</head>
<body>

    <div id="my-image">
        <div id="my-text">some text</div>
    </div>

</body>
</html>

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195992

Set the text to be position:absolute and the containing div to be position:relative

And also center the div using margins and not the deprecated align attribute..

<style type="text/css">
    .container{
           position:relative;
           margin-left:auto;
           margin-right:auto;
           width:1024px;}
    #l1 {
       position: absolute;
       left: 20px;
       top: 30px;
       color: #03C;
       text-align:left;
    }
</style>


<div class="container">
    <div id="l1">
       some
   </div>
 <img src="some.jpg" width="1024" height="788" />
</div>

Upvotes: 2

Related Questions