Fixing text to image while creating parallax scrolling effect

up vote
0
down vote

favorite

I am trying to create parallax scrolling effect, the image works well, but I have some text over the image, and I want the text to be "fixed" to image - and then make the rest of website overlap it. The text should be at the same position while scrolling, until you scroll out of image. If I use position: fixed, it just keeps there over the whole website.

p {

  font-size: 50px;

}



header {

  background-image: url("https://wallpapercave.com/wp/DtslnrT.jpg");

  background-attachment: fixed;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  font-weight: bold;

  text-align: center;

  color: #fff;

  font-size:55px;

  height: 100vh;

  width: 100%;

}



.text{

  position: relative;

  width: 100%;

  top: 30%;

}

<header>

  <div class="text">

  Sample text

  </div>

</header>

<p>

  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

p {

  font-size: 50px;

}



header {

  background-image: url("https://i.imgur.com/BVyNv0o.jpg");

  background-attachment: fixed;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  font-weight: bold;

  text-align: center;

  color: #fff;

  font-size:55px;

  height: 100vh;

  width: 100%;

}



.text{

  position: relative;

  width: 100%;

  top: 30%;

}

<header>

  <div class="text">

  </div>

</header>

<p>

HOW IT SHOULD WORK



  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

edited Nov 18 at 10:29

asked Nov 18 at 8:58

Arbys

103

something like this: stackoverflow.com/questions/49763949/… ?
– Temani Afif
Nov 18 at 9:10

looks good, but the div is showing from bottom, I want it to scroll normally over the first one - it should look the same, as the text was written on image - I have added how I want it to look like, the text is written on image here, or if I set it to position: fixed, it's also good - until you scroll down to the next div, the text remains at the top above the div
– Arbys
Nov 18 at 10:38

exactly what I did, my example is elaborated but As you can see the text is fixed in the first layer and also the second layer so simply keep the logic of the first layer
– Temani Afif
Nov 18 at 10:38

add a comment |

up vote
0
down vote

favorite

p {

  font-size: 50px;

}



header {

  background-image: url("https://wallpapercave.com/wp/DtslnrT.jpg");

  background-attachment: fixed;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  font-weight: bold;

  text-align: center;

  color: #fff;

  font-size:55px;

  height: 100vh;

  width: 100%;

}



.text{

  position: relative;

  width: 100%;

  top: 30%;

}

<header>

  <div class="text">

  Sample text

  </div>

</header>

<p>

  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

p {

  font-size: 50px;

}



header {

  background-image: url("https://i.imgur.com/BVyNv0o.jpg");

  background-attachment: fixed;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  font-weight: bold;

  text-align: center;

  color: #fff;

  font-size:55px;

  height: 100vh;

  width: 100%;

}



.text{

  position: relative;

  width: 100%;

  top: 30%;

}

<header>

  <div class="text">

  </div>

</header>

<p>

HOW IT SHOULD WORK



  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

edited Nov 18 at 10:29

asked Nov 18 at 8:58

Arbys

103

something like this: stackoverflow.com/questions/49763949/… ?
– Temani Afif
Nov 18 at 9:10

looks good, but the div is showing from bottom, I want it to scroll normally over the first one - it should look the same, as the text was written on image - I have added how I want it to look like, the text is written on image here, or if I set it to position: fixed, it's also good - until you scroll down to the next div, the text remains at the top above the div
– Arbys
Nov 18 at 10:38

exactly what I did, my example is elaborated but As you can see the text is fixed in the first layer and also the second layer so simply keep the logic of the first layer
– Temani Afif
Nov 18 at 10:38

add a comment |

up vote
0
down vote

favorite

p {

  font-size: 50px;

}



header {

  background-image: url("https://wallpapercave.com/wp/DtslnrT.jpg");

  background-attachment: fixed;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  font-weight: bold;

  text-align: center;

  color: #fff;

  font-size:55px;

  height: 100vh;

  width: 100%;

}



.text{

  position: relative;

  width: 100%;

  top: 30%;

}

<header>

  <div class="text">

  Sample text

  </div>

</header>

<p>

  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

p {

  font-size: 50px;

}



header {

  background-image: url("https://i.imgur.com/BVyNv0o.jpg");

  background-attachment: fixed;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  font-weight: bold;

  text-align: center;

  color: #fff;

  font-size:55px;

  height: 100vh;

  width: 100%;

}



.text{

  position: relative;

  width: 100%;

  top: 30%;

}

<header>

  <div class="text">

  </div>

</header>

<p>

HOW IT SHOULD WORK



  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

edited Nov 18 at 10:29

asked Nov 18 at 8:58

Arbys

103

p {

  font-size: 50px;

}



header {

  background-image: url("https://wallpapercave.com/wp/DtslnrT.jpg");

  background-attachment: fixed;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  font-weight: bold;

  text-align: center;

  color: #fff;

  font-size:55px;

  height: 100vh;

  width: 100%;

}



.text{

  position: relative;

  width: 100%;

  top: 30%;

}

<header>

  <div class="text">

  Sample text

  </div>

</header>

<p>

  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

p {

  font-size: 50px;

}



header {

  background-image: url("https://i.imgur.com/BVyNv0o.jpg");

  background-attachment: fixed;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  font-weight: bold;

  text-align: center;

  color: #fff;

  font-size:55px;

  height: 100vh;

  width: 100%;

}



.text{

  position: relative;

  width: 100%;

  top: 30%;

}

<header>

  <div class="text">

  </div>

</header>

<p>

HOW IT SHOULD WORK



  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

p {

  font-size: 50px;

}



header {

  background-image: url("https://wallpapercave.com/wp/DtslnrT.jpg");

  background-attachment: fixed;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  font-weight: bold;

  text-align: center;

  color: #fff;

  font-size:55px;

  height: 100vh;

  width: 100%;

}



.text{

  position: relative;

  width: 100%;

  top: 30%;

}

<header>

  <div class="text">

  Sample text

  </div>

</header>

<p>

  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

p {

  font-size: 50px;

}



header {

  background-image: url("https://wallpapercave.com/wp/DtslnrT.jpg");

  background-attachment: fixed;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  font-weight: bold;

  text-align: center;

  color: #fff;

  font-size:55px;

  height: 100vh;

  width: 100%;

}



.text{

  position: relative;

  width: 100%;

  top: 30%;

}

<header>

  <div class="text">

  Sample text

  </div>

</header>

<p>

  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

p {

  font-size: 50px;

}



header {

  background-image: url("https://i.imgur.com/BVyNv0o.jpg");

  background-attachment: fixed;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  font-weight: bold;

  text-align: center;

  color: #fff;

  font-size:55px;

  height: 100vh;

  width: 100%;

}



.text{

  position: relative;

  width: 100%;

  top: 30%;

}

<header>

  <div class="text">

  </div>

</header>

<p>

HOW IT SHOULD WORK



  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

p {

  font-size: 50px;

}



header {

  background-image: url("https://i.imgur.com/BVyNv0o.jpg");

  background-attachment: fixed;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  font-weight: bold;

  text-align: center;

  color: #fff;

  font-size:55px;

  height: 100vh;

  width: 100%;

}



.text{

  position: relative;

  width: 100%;

  top: 30%;

}

<header>

  <div class="text">

  </div>

</header>

<p>

HOW IT SHOULD WORK



  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

html css text css-position parallax

edited Nov 18 at 10:29

asked Nov 18 at 8:58

Arbys

103

edited Nov 18 at 10:29

asked Nov 18 at 8:58

Arbys

103

edited Nov 18 at 10:29

asked Nov 18 at 8:58

Arbys

103

asked Nov 18 at 8:58

Arbys

103

asked Nov 18 at 8:58

Arbys

103

something like this: stackoverflow.com/questions/49763949/… ?
– Temani Afif
Nov 18 at 9:10

looks good, but the div is showing from bottom, I want it to scroll normally over the first one - it should look the same, as the text was written on image - I have added how I want it to look like, the text is written on image here, or if I set it to position: fixed, it's also good - until you scroll down to the next div, the text remains at the top above the div
– Arbys
Nov 18 at 10:38

exactly what I did, my example is elaborated but As you can see the text is fixed in the first layer and also the second layer so simply keep the logic of the first layer
– Temani Afif
Nov 18 at 10:38

add a comment |

something like this: stackoverflow.com/questions/49763949/… ?
– Temani Afif
Nov 18 at 9:10

looks good, but the div is showing from bottom, I want it to scroll normally over the first one - it should look the same, as the text was written on image - I have added how I want it to look like, the text is written on image here, or if I set it to position: fixed, it's also good - until you scroll down to the next div, the text remains at the top above the div
– Arbys
Nov 18 at 10:38

exactly what I did, my example is elaborated but As you can see the text is fixed in the first layer and also the second layer so simply keep the logic of the first layer
– Temani Afif
Nov 18 at 10:38

something like this: stackoverflow.com/questions/49763949/… ?
– Temani Afif
Nov 18 at 9:10

looks good, but the div is showing from bottom, I want it to scroll normally over the first one - it should look the same, as the text was written on image - I have added how I want it to look like, the text is written on image here, or if I set it to position: fixed, it's also good - until you scroll down to the next div, the text remains at the top above the div
– Arbys
Nov 18 at 10:38

exactly what I did, my example is elaborated but As you can see the text is fixed in the first layer and also the second layer so simply keep the logic of the first layer
– Temani Afif
Nov 18 at 10:38

add a comment |

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53359265%2ffixing-text-to-image-while-creating-parallax-scrolling-effect%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

active

oldest

votes

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Nsryjdtyk