Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Overlap image with text
 
whoscart
Sr. Member
 
Total Posts:  120
Joined:  2008-02-23
 

How do I insert an image onto a page and then have text show on the image as if the image was a background to the text?

 
Magento Community Magento Community
Magento Community
Magento Community
 
sysk
Member
 
Total Posts:  56
Joined:  2008-04-14
 

The easiest way to do this would be to set the image as background-image to a <div> and put your text in the <div>.

<div style="background-image:url(’image.jpg’);width:100px;height:100px;">Your text here.</div>

The problem with this technique is that you always have to specify the image’s dimension in the style declaration…

Another way to do this would be to put your image in a <div> and use absolute positioning on another <div> containing your text:

<div style="position:relative"><img src="image.jpg" /><div style="position:absolute;left:0;top:0;">your text here</div></div>

PS: Looks like this thread should go in the Programming questions forum wink

 
Magento Community Magento Community
Magento Community
Magento Community
 
whoscart
Sr. Member
 
Total Posts:  120
Joined:  2008-02-23
 

Oh didn’t notice the wrong forum. lol. Thanks.

I tried the second method since the first one just didn’t work out with me. But the text is always partly off the image. How do I get it to center from the top? And how do I get the font to be white?

 
Magento Community Magento Community
Magento Community
Magento Community
 
whoscart
Sr. Member
 
Total Posts:  120
Joined:  2008-02-23
 

Any thoughts anyone?

 
Magento Community Magento Community
Magento Community
Magento Community
 
whoscart
Sr. Member
 
Total Posts:  120
Joined:  2008-02-23
 

Bump! Anyone have a solution to this?

 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 

Hello, this is CSS question, not programming.

#the_div_your_want_the_background_image_be {
background: url(your_background_image.jpg)
}

or

.the_div_your_want_the_background_image_be {
background: url(your_background_image.jpg)
}

.” is class and can be used and re-use many times in a page/entire site

#” is Unique ID that can only be used ONCE in a page.

 
Magento Community Magento Community
Magento Community
Magento Community
 
whoscart
Sr. Member
 
Total Posts:  120
Joined:  2008-02-23
 

I tried you way and it doesn’t work. I have my home page below....The section I need is the one which starts with a comment in CAPITAL LETTERS in <!-- --> in the middle below:

_________________________________

<DIV ALIGN=CENTER>
<object type="application/x-shockwave-flash"
data="http://maintryout.com/skin/frontend/default/default/flash/Main_Screen.swf"
width="600" height="250">
<param name="movie" value="http://maintryout.com/skin/frontend/default/default/flash/Main_Screen.swf" />
<param name="quality" value="auto high” />
<param name="loop" value="true" />
<param name="menu" value="false" />
<param name="wmode" value="transparent" />
</object>
</div>
<br>
<br>
<p>
</p>
<div ALIGN=CENTER>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>

<TR>
<TD ALIGN="center" COLSPAN="3"><img src="http://maintryout.com/skin/frontend/default/default/images/Intro_Black.png"
border="0" alt="” /></TD>
</TR>

<TR>
<TD ALIGN="center"> <a href="/producta">
<img src="http://maintryout.com/skin/frontend/default/default/images/Box_Ground.png" width="200" height="300" border="0" alt="” />
</a>
<div><style color="000000">Look for our <a href="/sand/specials">Special Offers</a>
</div>
</td>

<!-- THIS IS WHERE I WANT THE OVERLAPPING TO BE.... SO HOW DO I PLACE IN THIS IMAGE WITH A TEXT OVER IT THAT READS: “COME IN NOW”, WITH EACH WORD ON A LINE? -->

<TD ALIGN="center"><a href="/promo">
<div>
.div{background: “http://maintryout.com/skin/frontend/default/default/images/Promotional_Box.png” (Promotional_Box.png)}

</td>

<!-- UP TO HERE -->

<TD ALIGN="center"><a href="/other">
<img src= “http://maintryout.com/skin/frontend/default/default/images/other_Box.png” width="200" height="300” border="0" alt="” />
</a>
<div><style color="000000">Check out our <a href="/other/best-sellers">Best-Sellers</a>
</div>
</td>
</tr>
</table>
</div>

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top