see through div when using background tile

Okay, not the easiest one to explain in the subject but hoping that someone can help here.

I have a site that has a textured background. I am also trying to add colour on either side of the page title. Now, if I was using a solid colour for the site background I could simply use that colour for the background colour of the span but because I'm using a tile I then cannot use the same tile for the span in the title because it won't tile correctly.

I'm guessing this can't be achieved but hoping it can.

Take a look here…


<!DOCTYPE html>
<html>
<head>
 <title></title>
 <style type="text/css">
 body { background: url(images/Lined-Paper-White-Tileable-pattern.jpg) repeat; }
 .entry-title span {
 background-color: #fff;
 padding: 0 10px;
 margin: 0 20px;
 display: inline-block;
 }
 .entry-title {
 text-align: center;
 background-color: #efefef;
 line-height: 1em;
 font-size: 3.8em;
 margin-bottom: 20px;
 }
 </style>
</head>
<body class="">
<h1 class="entry-title"><span>Page title</span></h1>
</body>
</html>

see through div when using background tile

greencode

DrDoc

greencode

lucy24

greencode

greencode

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week