Welcome to WebmasterWorld Guest from 54.205.251.179

Forum Moderators: not2easy

Message Too Old, No Replies

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