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!