Welcome to WebmasterWorld Guest from 23.22.46.195

Forum Moderators: not2easy

see through div when using background tile

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

5+ Year Member



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)

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



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)

5+ Year Member



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)

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



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)

5+ Year Member



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)

5+ Year Member



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

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month