Welcome to WebmasterWorld Guest from 54.145.23.244

Forum Moderators: not2easy

Message Too Old, No Replies

see through div when using background tile

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

Junior Member

5+ Year Member

joined:July 4, 2007
posts: 185
votes: 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>
<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>
9:42 pm on Dec 23, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


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

With
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)

Junior Member

5+ Year Member

joined:July 4, 2007
posts: 185
votes: 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)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:12994
votes: 287


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)

Junior Member

5+ Year Member

joined:July 4, 2007
posts: 185
votes: 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)

Junior Member

5+ Year Member

joined:July 4, 2007
posts: 185
votes: 0


Hi.

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

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members