#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    4
    Rep 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>
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    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.
    Last edited by Nanomech; February 25th, 2013 at 04:47 PM.

IMN logo majestic logo threadwatch logo seochat tools logo