Text over images - Superimposed Text

Text over images - Superimposed Text

The first example inset a background image into the <div> tag using the background-image attribute.
Here the text is not positioning.


<style type="text/css">
<!--
div#txt_img_example1 {
    background-image:  url(MacBook_Pro.jpg);
    background-repeat: no-repeat;
    height: 160px;
    width: 278px;
}
-->
</style>

<div id="txt_img_example1">MacBook Pro</div>

For positioning the text, add the following to the Style Sheet.


div#text_pos {
    position: absolute;
    height: auto;
    width: auto;
    left: 62px;
    top: 240px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: x-large;
    font-weight: bold;
    color: White;
}


<div id="txt_img_example2">
  <div id="text_pos">MacBook Pro</div>
</div>

Using the CSS-styled text technique for text over a photo has several advantages like:
Smaller image size
Easier text editing and positioning
Very Search Engine Friendly, no need for alt text attributes or other accessibility workarounds.

Advertisement

No User Comments.

No User Comments, be the first one to write your comments?