/    Sign up×
Community /Pin to ProfileBookmark

how is this done?

go here and scroll up and down:
[url]http://www.lovesac.com/oversized/the_man.php[/url]

as you scroll, watch the transparent outline around the main white box. it’s white and transparent to the background image at the same time. how is that done? thanks

to post a comment
Full-stack Developer

6 Comments(s)

Copy linkTweet thisAlerts:
@JickNov 13.2004 — Well I didn't check his code but if I understand you correctly one way you could do it is to set that image as the background of your page and then set the attachment to "fixed". In your CSS you would have this:body {
background-image: url(your-image.gif);
background-attachment: fixed;
}
Hope that helps. ?
Copy linkTweet thisAlerts:
@Chaos343authorNov 13.2004 — i looked at the code and the css.

i think there are different versions of the background images. a dark and a light version. and i guess the box outline uses the light version. i think it's cool.
Copy linkTweet thisAlerts:
@96turnerriNov 13.2004 — im not saying jicks code wont work but i would do it like this
body {
background-image: url(your-image.gif) fixed;
}
Copy linkTweet thisAlerts:
@pawkyNov 13.2004 — [i]Originally posted by 96turnerri [/i]

[B]im not saying jicks code wont work but i would do it like this

body {
background-image: url(your-image.gif) fixed;
}
[/B][/QUOTE]


if you were going to use them together it wouldnt be background-image but just background: so it would be:
body {
background: url(your-image.gif) fixed;
}
Copy linkTweet thisAlerts:
@davidbrentNov 15.2004 — they're both the same so lets not differ eh?
Copy linkTweet thisAlerts:
@96turnerriNov 15.2004 — [i]Originally posted by davidbrent [/i]

[B]they're both the same so lets not differ eh? [/B][/QUOTE]


exactly, it doesnt make a bit of difference, tomATEo or tomARTo, same difference
×

Success!

Help @Chaos343 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.19,
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,
)...