Text background

HTML & CSS
1

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

If you mean “Neil Young 1944-2011”, it’s an absolute positioned div with a h2 having an 70% opaque image as background

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

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 :slight_smile:

4

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

Are you trying to do something like this?


<!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>