Image over top of text

Dev Shed Forums Sponsor:

February 25th, 2013, 03:54 PM

tradeweb

Registered User

Join Date: Feb 2013

Posts: 4

Time spent in forums: 28 m 38 sec
Reputation Power: 0

Image over top of text

If I have a <div> container with some paragraphs within that DIV. Is it possible to use CSS to apply an image OVERTOP of the paragraph? Sounds like an odd thing to do...I know! Part of the image will be transparent.

<div class="container">
<p></p>
</div>

February 25th, 2013, 04:24 PM

Nanomech

Contributing User

Join Date: Aug 2011

Location: The Pleiades

Posts: 227

Time spent in forums: 2 Days 3 h 9 m
Reputation Power: 7

Hi tradeweb,

Give this a go:

Code:

<div id="container">
<p>This is some text This is some text This is some text This is</p>
</div>

<img src="phpwp.jpg" alt="php wallpaper" />

CSS:

Code:

#container
{
	width: 100px;
	height: 100px;
	border 1px solid black;
	background: red;
}

img
{
	width: 100px;
	height: 100px;
	position: relative;
	top: -30px;
	left: 70px;
}

I'm not sure on how to make only the part which is covering your paragraph have a low opacity. I can make the whole image transparent but not part of it unless there is some code I've not come across before. It can be done but I'm thinking maybe Javascript to calculate it somehow?

Anyone got more thoughts on this, I'm curious now!

Regards,

NM.

__________________
Gardenable: http://www.labtec.0fees.net/Gardena...oved/?page=home
Carewizard: http://www.carewizard.co.uk

Last edited by Nanomech : February 25th, 2013 at 04:47 PM.

Viewing: Dev Shed Forums > Web Design > CSS Help > Image over top of text

« Previous Thread | Next Thread »

Developer Shed Advertisers and Affiliates

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts vB code is On Smilies are On [IMG] code is On HTML code is Off

View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox

Forum Jump