ThemeShaper Forums » Thematic

[closed]

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

(6 posts)
  • Started 3 years ago by knowlsy
  • Latest reply from knowlsy
  • This topic is resolved
  1. 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 3 years ago #
  2. 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 3 years ago #
  3. 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 3 years ago #
  4. 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 3 years ago #
  5. 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 3 years ago #
  6. knowlsy
    Member

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

    THANKS!

    Posted 3 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.