Text background

**lw-d** · Feb 3, 2011 12:30

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

**noonnope** · Feb 3, 2011 12:42

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.

**RyanReese** · Feb 3, 2011 14:01

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

**lw-d** · Mar 21, 2011 13:46

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

**Paul O'B** · Mar 21, 2011 14:43

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>

User Tag List

Thread: Text background

Thread Tools

Display

Text background

Bookmarks

Bookmarks

Posting Permissions