Welcome to WebmasterWorld Guest from 23.22.182.29

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: 183
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: 183
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 Top Contributors Of The Month

joined:Apr 9, 2011
posts:12704
votes: 244


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