Transparent Background

Discussion in 'CSS' started by ftbadolato, Mar 5, 2010.

  1. #1
    Take a look at this page:
    http://sieglers.griergroupinc.com/About/

    The white transparent bg behind the text is actually an image. I know I can duplicate that look wiht JS, CSS....but I don't know how. Can anyone post some simple (or...the simplest) piece of code to make a div have a transparent bg like that?

    Thanks!
     
    ftbadolato, Mar 5, 2010 IP
  2. typingmums

    typingmums Well-Known Member

    Messages:
    1,446
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    140
    #2
    Its not a transparent background - its an image cut from the main background, but given a reduced opacity - it is two separate images of the same thing, one laid on top of the other

    This is the first image: [​IMG]

    An this is the content image: [​IMG]
     
    typingmums, Mar 5, 2010 IP
  3. ftbadolato

    ftbadolato Peon

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Um...yes, that is correct. That is what I stated in my original post:

    "The white transparent bg behind the text is actually an image."

    I am trying to duplicte this appearance using CSS.
     
    ftbadolato, Mar 5, 2010 IP
  4. typingmums

    typingmums Well-Known Member

    Messages:
    1,446
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    140
    #4
    My point is, that there is nothing transparent about the image at all, its two separate, solid images overlaying each other.

    Its just a background image in the body, and a background image in the content? The only thing you'd need to work through with CSS would be the placement, which is just good old maths! :)
     
    typingmums, Mar 5, 2010 IP
  5. typingmums

    typingmums Well-Known Member

    Messages:
    1,446
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    140
    #5
    OK, I've just realised from another thread that this is actually YOUR site, and that this is your mock up... you're trying to create a 'similar' outcome, but not the same as this. Sorry I assumed this was an example site you were showing us that you were trying to recreate on a site you were building... I'm with you now sorry!
     
    typingmums, Mar 5, 2010 IP
  6. ftbadolato

    ftbadolato Peon

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Got it. :) As you can see, I've managed to create the transparent look. I just need help on placing it properly. I've left the image on there for now b/c I want to place the transparent CSS exactly where the image is, so it is just acting as a guide for me right now. I then want to add rounded corners (like the image).
     
    ftbadolato, Mar 5, 2010 IP