Marquee text over an image in html

Question

I want a text to scroll from up to down over an image in top-right corner in my webpage. But I am not able to place the text over image. Thanks in advance

<div id="display">
    <img height="210" width="160" src="note1.gif" />
    <marquee id="m1" onMouseOver="stopM()" onMouseOut="startM()" scrollamount="2" direction="up" loop="true" width="30%">
    <center>
    <p id="text">
    Opening Soon !!!
    </p>
    </center>
    </marquee>
    </div>

This is my css code

#display { 
        position:absolute; 
        visibility:show; 
        left: 73%; 
        top: 2%;        
        }
#text
{
     color:Black;
    font-size:12px;
    font-weight:bold;
    left:65%;
    top:2%;
}

Answer 1

I'll avoid commenting on the validity of your HTML, and stick solely to solving your problem here.

This fiddle should solve your problem

CSS

#display 
{ 
     position:absolute; 
     visibility:show; 
     left: 73%; 
     top: 2%;
}
#text
{
    color:Black;
    font-size:12px;
    font-weight:bold;
    left:65%;
    top:2%;
}
marquee {
    position: absolute;
    top: 0;
}

Answer 2

You either need to absolutely-position the image behind the other elements:

#display { position: relative; }
#display img { position: absolute; }

or move your image into a background:

#display { 
   background-image: url(note1.gif);
   background-repeat: no-repeat;
}

That said, please note (as others have pointed out) that <marquee> is a non-standard tag and <center> has been long since deprecated.

Answer 3

If you really want to do this, change your CSS to

#display { 
        position: relative 
        visibility:show; 
        overflow:hidden;
       height: 210px;
       width: 160px;

        }

#display img { 
    position: absolute;
    z-index: 1;

}

#display marquee { 
    z-index: 2;
    position: absolute;

}



#text
{
     color:Black;
    font-size:12px;
    font-weight:bold;
    left:65%;
    top:2%;
}

See working demo here

Answer 4

this is working code .. hope so help you

<div id="marquee" style="margin-top: 5%;" >
       <marquee id="marquee2" scrollamount="5" loop="infinite" bgcolor="white"  onmouseover="this.stop()" onmouseout="this.start()">
       <div style="float: left; padding: 5px;">
        <a href="#"><img src="karachi.jpg"  style="height: 200px; width: 200px;" >
        </a>
        <div >
        <h2>MULTAN </h2>
        
        </div></div>
        <div style="float: left;">
        <a href="#"><img src="karachi.jpg"  style="height: 200px; width: 200px;" >
        </a>
        <div >
        <h2>LAHORE </h2>
        
        </div></div>
        
       </marquee>
    
    </div>  

MULTAN

LAHORE