/    Sign up×
Community /Pin to ProfileBookmark

Achieving the effect of a viewport-fixed background being only visible inside a div?

Copy linkTweet thisAlerts:
Jul 08.2015

I want to do something like this:

[code=html]<background-outer>
<background-inner>
<box />
<box />
<box />
</background-inner>
</background-outer>[/code]

[LIST]

  • [*]

    Background-outer being the main background of the site.


  • [*]

    The boxes are identical divs with borders but are otherwise transparent.


  • [*]

    Background-inner is a background fixed to the viewport, just like the outer background, with one exception: it is only visable inside of the child divs (boxes).


    • [/LIST]

    In other words, I want two viewport-fixed backgrounds: one that’s visible outside the boxes, and one thats visible inside the boxes. Is this, or some other implementation that creates the same effect, possible?

    to post a comment
    CSS

    3 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @rtretheweyJul 09.2015 — Try something like:
    <i>
    </i>background-outer, background-inner { background-attachment:fixed; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; }
    background-outer { padding:20px; background-image:url('background1.jpg'); }
    background-inner { background-image:url('background2.jpg');


    Just replace "background-outer" and "background-inner" with the appropriate 'id' attribute values. That should get you started.
    Copy linkTweet thisAlerts:
    @roleparadiseauthorAug 02.2015 — I've achieved the effect I was asking for: http://codepen.io/anon/pen/xGmYMa

    Notice the stationary background within the item divs.

    Unfortunately, background-attachment:fixed isn't mobile friendly. How would I achieve this effect on mobile?
    Copy linkTweet thisAlerts:
    @rtretheweyAug 03.2015 — You could just ignore the issue for mobile since the effect is far less noticeable on those devices anyway, but it would obviously depend on the layout you're developing. The alternative would be to emulate the effect in JavaScript. If you search on "background fixed javascript" I would expect that there are some possible solutions out there.
    ×

    Success!

    Help @roleparadise spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.18,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...