SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Text background

  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text background

    Hi all,

    I was wondering if there is a CSS way of achieving what has been achieved with flash on this site:

    http://mcfc.co.uk (it's the large text in the banner).

    Thanks
    Lee

  2. #2
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you mean "Neil Young 1944-2011", it's an absolute positioned div with a h2 having an 70% opaque image as background

    Code:
    h2.white-60-opaque {
        background: url("images/opacity70.png") repeat scroll left top transparent;
        padding: 15px 0 5px 15px !important;
    }
    so it's CSS already.

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,596
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    For the future, if you wnat to see what CSS is being applied to something (if it is CSS) then download firebug for firefox, right click the object, and view the styles
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi all,

    The main issue that I have is having left padding on the text, the problem is that it only displays padding on the first line, I'm guessing this is why they used Flash.

    Lee

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Are you trying to do something like this?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .linewrap {
        color:#fff;
        position:relative;
        border-left:20px solid #000;
        line-height:36px;
        width:50%;
    }
    .linewrap span {
        background:#000;
    }
    .linewrap b {
        color:#fff;
        position:relative;
        left:-10px;
        padding:0 10px 0 0;
    }
    </style>
    </head>
    <body>
    <h1 class="linewrap"><span><b>This is some text that will wrap to another line where needed but the background only follows the text</b></span></h1>
    </body>
    </html>


Bookmarks

Posting Permissions

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