homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

see through div when using background tile

 8:30 pm on Dec 23, 2013 (gmt 0)

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>
<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;
<body class="">
<h1 class="entry-title"><span>Page title</span></h1>



 9:42 pm on Dec 23, 2013 (gmt 0)

It can be done if you use
background-position: fixed.

background-position: fixed, you can have multiple object with multiple background tile perfectly, much like normal position: fixed for page elements.

 9:47 pm on Dec 23, 2013 (gmt 0)

Of course! I'm so used to scrolling backgrounds I'd completely forgotten about this. Thanks so much for this.


 9:55 pm on Dec 23, 2013 (gmt 0)

Is this the same question as last time [webmasterworld.com]? I thought it sounded awfully familiar, though I didn't remember that it was you that time too.


 10:20 pm on Dec 23, 2013 (gmt 0)

Doh! I'm usually pretty good at looking at my previous posts before posting. Sorry for wasting everyone's time.


 11:56 am on Jan 2, 2014 (gmt 0)


I've implemented this code but I have a slight problem when I come to resize the browser i.e. responsive website.

The background image on the span tag sometimes fails to show. I have to then either reload the page or resize the browser window slightly in order for it it to show up again?!

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved