CSS/HTML Effect background

Question

Could you please tell me how to achieve the following "scrolling background" effect: here

Thanks

You shouldnt post external links. If in some future your link gets broken then this question and its answers will go obsolete .Second, what have you tried so far? The effect you want can be achieved with `position:fixed`, `z-index`, and perhaps some `margin-top` in the following container. But nobody will do your work, give it a shot and then edit with what you have tried and where you got stuck — pablito.aven, Mar 27 '17 at 18:23
@Koby haha and Alex, please read Pablito's comment. SO helps people in solving issues with their codes, not write them new code from scratch. Cheers — AndrewL64, Mar 27 '17 at 18:25
This question, as is currently asked, is too broad. You're getting down votes because you've essentially asked for someone to do this from scratch. Also, as pablito said, a better description of the effect you're going for would be good so that your question is answerable (you can't assume everyone is able to view links like that at school/work, even if the URL is good). Check out http://stackoverflow.com/help/on-topic and http://stackoverflow.com/help/how-to-ask — BSMP, Mar 27 '17 at 18:25
I understand but this site is set up so that answers are supposed to solve the issue in the question, not just give suggestions. Also, I can't mark it now, but I think this is a duplicate of http://stackoverflow.com/questions/16987203/turning-a-div-into-transparent-to-see-through-two-containers — BSMP, Mar 27 '17 at 18:30

score 0 · Answer 1 · answered Mar 27 '17 at 18:28

0

I'm not master but try to add the following CSS property: background-image: url("here goes the adress of your img");

answered Mar 27 '17 at 18:28

1

@BlaShka14 - please read "[how to answer](http://stackoverflow.com/help/how-to-answer)" – Carol Skelly Mar 27 '17 at 18:34

score 0 · Accepted Answer · answered Mar 27 '17 at 18:46

What you want is called Parallax. Please, as instructed, read the rules about asking. It may do our jobs easier.

Here's a guide from W3C about how to do it:

Parallax scrolling is a web site trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling.

<!DOCTYPE html>
<html>
<head>
<style>
.parallax {
    /* The image used */
    background-image: url("https://www.w3schools.com/howto/img_parallax.jpg");

    /* Set a specific height */
    min-height: 500px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>
</head>
<body>

<p>Scroll Up and Down this page to see the parallax scrolling effect.</p>

<div class="parallax"></div>

<div style="height:1000px;background-color:red;font-size:36px">
Scroll Up and Down this page to see the parallax scrolling effect.
This div is just here to enable scrolling.
</div>

</body>
</html>

please read the **Answer well-asked questions** part of [how to answer](http://stackoverflow.com/help/how-to-answer) — Carol Skelly, Mar 27 '17 at 18:59
Sorry @ZimSystem the question might be unclear, but just looking through her site I could see what was the problem. It is quite common. I'm pretty sure it would be "not cool" knowing the answer and not doing it just for the sake of it. And, even if the site was no longer online, my answer would complement her question, making it understandable for everyone. — Andre Aquiles, Mar 27 '17 at 19:04
But now the OP is stuck with a question they may not be able to fix, thus potentially attracting more down votes than the 4 they've already got. — BSMP, Mar 29 '17 at 16:28

CSS/HTML Effect background

2 Answers2