'background-attachment: fixed' doesn't fix in menu etc...

ThemeShaper Forums » Thematic

[closed]

'background-attachment: fixed' doesn't fix in menu etc...

(6 posts)

Started 12 years ago by knowlsy
Latest reply from knowlsy
This topic is resolved

Tags:

knowlsy
Member
Hello everyone,

I'm trying out some new designs for my site, I'm after having a semi-transparent effect so that it appears as if my container/widget areas/menu have about 50 opacity. I might not be explaining it very well, but basically I'm after something similar to this site http://vbrant.eu/content/creative-commons-non-commercial-licences

What I've tried to do is use two separate images, the normal background and one which is the same as the background except lighter so that it looks as if it's at about 50 opacity. I then want to use the second image as the background in various different parts of the site, like my menu's/container etc.

This is the code I've got so far
```
background-attachment: fixed;
    background-image: url("images/backgroundb.jpg");
    background-position: 50% 0;
    background-repeat:no-repeat;
```
If you don't scroll down it looks exactly right. The problem comes when i scroll down. Even though i'm using 'background-attachment: fixed;' the image stays with me as i scroll down, and my background image is fixed, so they then no longer match (and it looks very silly!)

I'm afraid I'm working on this on my wamp server, the only webspace I have at the moment is being used for the website with the old design so I can't give you a link to show the problems.

Does anyone have any idea what I can do to stop it scrolling?

Thanks in advance!

Chris
Posted 12 years ago #
vicky515
Member

Sorry if I misunderstand but, if you want the image to scroll with the text, why not remove background-attachment:fixed? That CSS property means it is "fixed" in that location of the screen, even if you scroll.

Posted 12 years ago #
knowlsy
Member

Hi Vicky,

Just to clarify, I don't want it to move, but it does. If I remove that then (if i remember correctly) it does not fix the image within the screen (so for example if i wanted it as the background for my menu tabs, it will for each menu tab have the top left corner of the large image. if i use that line it does keep it fixed, so I get the corresponding part of the image in each tab of my menu, but when i scroll the corresponding image scrolls with me. I want it to stay still like the background!)

Sorry, it isn't particularly clear without an example to show you... I'll see what I can do...

Part of the reason why I'm confused is because fixed is the only option that gets me close to what I want, but it doesn't actually 'fix' what I thought it would 'fix'.

Thanks anyway

Chris

Posted 12 years ago #
helgatheviking
Moderator

i don't follow. try to get an example up somewhere. even if it is at

http://jsfiddle.net/

what about putting using a semi-transparent white png image as your background where you want this effect. then it doesn't have to line up w/ the body background

Posted 12 years ago #

joperron
Member

I suggest something like what helgatheviking said:

sf-menu li a  { background: url(images/white-50-trans.png); }
sf-menu li a:hover { background: url(images/black-50-trans.png); }

Posted 12 years ago #

knowlsy
Member

not quite sure why I didn't think of a semi-transparent .png before now... *feels silly*

THANKS!

Posted 12 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.