Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder MrBiggZ's Avatar
    Join Date
    Apr 2005
    Location
    Indianapolis IN
    Posts
    269
    Thanks
    39
    Thanked 0 Times in 0 Posts

    How can you put text behind a semi-transparent background

    Greetings!

    The title to this thread was maybe a little off in description.

    Here's my test page => http://handlersspot.net/test/matrix

    I'm trying to create a dot matrix marqee using a jquery scroller that I've used in the past. I'm really just trying to add a div over the top of the container that has the scroller. The background of that overlapping div is black with transparent holes in it. The layer below has a dark grey color to give the illusion of the LED in the sign being off.

    I'm just having a rough time getting the background to be over the scroller so the text shows through the holes in the background.

    Any help would be appreciated! Thanks!
    “No matter how slick the demo is in rehearsal, when you do it in front of a live audience, the probability of a flawless presentation is inversely proportional to the number of people watching, raised to the power of the amount of money involved.” ~ Mark Gibbs

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,694
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there MrBiggZ,

    you need to change the html div order slightly...
    Code:
    <div id="dotMarquee">
    
    <div id="dots"></div>
    
    <div class="scrollingHotSpotLeft"></div>
    
    <div class="scrollingHotSpotRight"></div>
    
    <div class="scrollWrapper">
     <div class="scrollableArea"></div>
    </div>
    
    </div>
    
    ...and the css slightly...
    Code:
    
    #dots {
        position:absolute;
        background:url('matrix.png');	
        width:100%;
        height:75px;
        z-index:1;
     }
    
    coothead

  • #3
    Regular Coder MrBiggZ's Avatar
    Join Date
    Apr 2005
    Location
    Indianapolis IN
    Posts
    269
    Thanks
    39
    Thanked 0 Times in 0 Posts
    I gave that a try!

    That's the original div order that I started out with!

    The css for that id is different though. I gave it a try and the dots are were they should be. That far I had gotten before opening a thread.

    I tried to give the p tag for dotMarquee a negative top margin. All that happened was that the text got but under the rest of the layers.

    This is strange!!!
    “No matter how slick the demo is in rehearsal, when you do it in front of a live audience, the probability of a flawless presentation is inversely proportional to the number of people watching, raised to the power of the amount of money involved.” ~ Mark Gibbs

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,694
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there MrBiggZ,

    it seems that you have problems using the css that I posted.

    You are using...
    Code:
    #dots {
    	position;absolute;
    	background: url('matrix.png');
    	margin:0 0 0 0;
    	width;100%;
    	height:75px;
    	z-index:1;
    	}
    
    ..but I gave you this...
    Code:
    #dots {
        position:absolute;
        background:url('matrix.png');	
        width:100%;
        height:75px;
        z-index:1;
     }
    
    I you look a little more carefully, you will see that you are using semi colons instead of colons.

    And margin:0 0 0 0; was not in my code at all.

    coothead

  • Users who have thanked coothead for this post:

    MrBiggZ (02-18-2012)

  • #5
    Regular Coder MrBiggZ's Avatar
    Join Date
    Apr 2005
    Location
    Indianapolis IN
    Posts
    269
    Thanks
    39
    Thanked 0 Times in 0 Posts
    Bah!

    Thought I deleted that zero margin! I'm not having a good day with my semi-colons and colons, at all!

    That actually looks pretty nifty! I need a slightly bigger font, perhaps fatter and increase the letter spacing a little. But yeah, it looks pretty good!

    Thanks so so so so much for your help!
    “No matter how slick the demo is in rehearsal, when you do it in front of a live audience, the probability of a flawless presentation is inversely proportional to the number of people watching, raised to the power of the amount of money involved.” ~ Mark Gibbs

  • #6
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,694
    Thanks
    0
    Thanked 232 Times in 227 Posts
    No problem, you're very welcome.
    I just knew that we would get there in the end.
    coothead

  • #7
    Regular Coder Taro's Avatar
    Join Date
    Oct 2011
    Location
    Geraldton, Ontario
    Posts
    155
    Thanks
    1
    Thanked 1 Time in 1 Post
    In addition to that, I would also suggest changing the transparency of the text, or align the background to wrap it with the coding.
    Element ID

    Webs Support Helper

    Your friendly neighborhood Taroman.

  • #8
    Regular Coder MrBiggZ's Avatar
    Join Date
    Apr 2005
    Location
    Indianapolis IN
    Posts
    269
    Thanks
    39
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Taro View Post
    In addition to that, I would also suggest changing the transparency of the text, or align the background to wrap it with the coding.
    Would you mean the opacity of the text? Background is aligned, best that I can see => width 100% and the height is manually set.

    I will give the opacity of the text a try though!
    “No matter how slick the demo is in rehearsal, when you do it in front of a live audience, the probability of a flawless presentation is inversely proportional to the number of people watching, raised to the power of the amount of money involved.” ~ Mark Gibbs


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •