homepage Welcome to WebmasterWorld Guest from 54.237.213.31
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
greencode

5+ Year Member



 
Msg#: 4633258 posted 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>
<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>

 

DrDoc

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



 
Msg#: 4633258 posted 9:42 pm on Dec 23, 2013 (gmt 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.
greencode

5+ Year Member



 
Msg#: 4633258 posted 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.

lucy24

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



 
Msg#: 4633258 posted 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.

greencode

5+ Year Member



 
Msg#: 4633258 posted 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.

greencode

5+ Year Member



 
Msg#: 4633258 posted 11:56 am on Jan 2, 2014 (gmt 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?!

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