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




msg:4633260
 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




msg:4633276
 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




msg:4633277
 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




msg:4633281
 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




msg:4633286
 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




msg:4634572
 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