Parallax Site with darken image not text
1
I am trying to create a parallax webpage with multiple images but I want to make the images darken and the text regular. My images and text are all in the same div since its parralax but maybe theres another way?
.pimg1,
.pimg2,
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
filter: brightness(50%);
height: 100vh;
.pimg1
background-image: url('https://www.sticky.digital/wp-content/uploads/2013/11/img-6.jpg');
min-height: 100%;
.pimg2
background-image: url('https://babeltechreviews.com/wp-content/uploads/2018/07/rendition1.img_.jpg');
min-height: 100%;
<body>
<div>
<img src="https://www.sticky.digital/wp-content/uploads/2013/11/img-6.jpg" class="pimg1">
<div class="ptext">
<h1 class="Intro"><strong>Farbod Jahan</strong></h1> <br>
</div>
</div>
<div>
<div class="pimg2">
<div class="ptext">
<h1 class="openSans"><strong>Who am I</strong></h1> <br>
</div>
</div>
</body>html css overlay parallax
edited Nov 15 '18 at 6:03
Ramesh
1,258419
asked Nov 15 '18 at 5:03
VisualExstasyVisualExstasy
399
|
show 2 more comments
1
I am trying to create a parallax webpage with multiple images but I want to make the images darken and the text regular. My images and text are all in the same div since its parralax but maybe theres another way?
.pimg1,
.pimg2,
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
filter: brightness(50%);
height: 100vh;
.pimg1
background-image: url('https://www.sticky.digital/wp-content/uploads/2013/11/img-6.jpg');
min-height: 100%;
.pimg2
background-image: url('https://babeltechreviews.com/wp-content/uploads/2018/07/rendition1.img_.jpg');
min-height: 100%;
<body>
<div>
<img src="https://www.sticky.digital/wp-content/uploads/2013/11/img-6.jpg" class="pimg1">
<div class="ptext">
<h1 class="Intro"><strong>Farbod Jahan</strong></h1> <br>
</div>
</div>
<div>
<div class="pimg2">
<div class="ptext">
<h1 class="openSans"><strong>Who am I</strong></h1> <br>
</div>
</div>
</body>html css overlay parallax
edited Nov 15 '18 at 6:03
Ramesh
1,258419
asked Nov 15 '18 at 5:03
VisualExstasyVisualExstasy
399
seems like you missing some opening/closing tags
– Viira
Nov 15 '18 at 5:17
@Viira Sorry I didn't copy my full code this is just the chunk that should make the difference
– VisualExstasy
Nov 15 '18 at 5:20
Why are you using both <img> tag and a background image?
– Viira
Nov 15 '18 at 5:28
I was trying different methods to bring background image darker while keeping the text bright. Originally its a <div class="pimg1"> like below
– VisualExstasy
Nov 15 '18 at 5:30
Ok wait let me decode it
– Viira
Nov 15 '18 at 5:30
|
show 2 more comments
1
1
1
I am trying to create a parallax webpage with multiple images but I want to make the images darken and the text regular. My images and text are all in the same div since its parralax but maybe theres another way?
.pimg1,
.pimg2,
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
filter: brightness(50%);
height: 100vh;
.pimg1
background-image: url('https://www.sticky.digital/wp-content/uploads/2013/11/img-6.jpg');
min-height: 100%;
.pimg2
background-image: url('https://babeltechreviews.com/wp-content/uploads/2018/07/rendition1.img_.jpg');
min-height: 100%;
<body>
<div>
<img src="https://www.sticky.digital/wp-content/uploads/2013/11/img-6.jpg" class="pimg1">
<div class="ptext">
<h1 class="Intro"><strong>Farbod Jahan</strong></h1> <br>
</div>
</div>
<div>
<div class="pimg2">
<div class="ptext">
<h1 class="openSans"><strong>Who am I</strong></h1> <br>
</div>
</div>
</body>html css overlay parallax
edited Nov 15 '18 at 6:03
Ramesh
1,258419
asked Nov 15 '18 at 5:03
VisualExstasyVisualExstasy
399
I am trying to create a parallax webpage with multiple images but I want to make the images darken and the text regular. My images and text are all in the same div since its parralax but maybe theres another way?
.pimg1,
.pimg2,
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
filter: brightness(50%);
height: 100vh;
.pimg1
background-image: url('https://www.sticky.digital/wp-content/uploads/2013/11/img-6.jpg');
min-height: 100%;
.pimg2
background-image: url('https://babeltechreviews.com/wp-content/uploads/2018/07/rendition1.img_.jpg');
min-height: 100%;
<body>
<div>
<img src="https://www.sticky.digital/wp-content/uploads/2013/11/img-6.jpg" class="pimg1">
<div class="ptext">
<h1 class="Intro"><strong>Farbod Jahan</strong></h1> <br>
</div>
</div>
<div>
<div class="pimg2">
<div class="ptext">
<h1 class="openSans"><strong>Who am I</strong></h1> <br>
</div>
</div>
</body>.pimg1,
.pimg2,
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
filter: brightness(50%);
height: 100vh;
.pimg1
background-image: url('https://www.sticky.digital/wp-content/uploads/2013/11/img-6.jpg');
min-height: 100%;
.pimg2
background-image: url('https://babeltechreviews.com/wp-content/uploads/2018/07/rendition1.img_.jpg');
min-height: 100%;
<body>
<div>
<img src="https://www.sticky.digital/wp-content/uploads/2013/11/img-6.jpg" class="pimg1">
<div class="ptext">
<h1 class="Intro"><strong>Farbod Jahan</strong></h1> <br>
</div>
</div>
<div>
<div class="pimg2">
<div class="ptext">
<h1 class="openSans"><strong>Who am I</strong></h1> <br>
</div>
</div>
</body>.pimg1,
.pimg2,
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
filter: brightness(50%);
height: 100vh;
.pimg1
background-image: url('https://www.sticky.digital/wp-content/uploads/2013/11/img-6.jpg');
min-height: 100%;
.pimg2
background-image: url('https://babeltechreviews.com/wp-content/uploads/2018/07/rendition1.img_.jpg');
min-height: 100%;
<body>
<div>
<img src="https://www.sticky.digital/wp-content/uploads/2013/11/img-6.jpg" class="pimg1">
<div class="ptext">
<h1 class="Intro"><strong>Farbod Jahan</strong></h1> <br>
</div>
</div>
<div>
<div class="pimg2">
<div class="ptext">
<h1 class="openSans"><strong>Who am I</strong></h1> <br>
</div>
</div>
</body>html css overlay parallax
html css overlay parallax
edited Nov 15 '18 at 6:03
Ramesh
1,258419
asked Nov 15 '18 at 5:03
VisualExstasyVisualExstasy
399
edited Nov 15 '18 at 6:03
Ramesh
1,258419
asked Nov 15 '18 at 5:03
VisualExstasyVisualExstasy
399
edited Nov 15 '18 at 6:03
Ramesh
1,258419
edited Nov 15 '18 at 6:03
Ramesh
1,258419
edited Nov 15 '18 at 6:03
Ramesh
1,258419
1,258419
asked Nov 15 '18 at 5:03
VisualExstasyVisualExstasy
399
asked Nov 15 '18 at 5:03
VisualExstasyVisualExstasy
399
asked Nov 15 '18 at 5:03
VisualExstasyVisualExstasy
399
399
seems like you missing some opening/closing tags
– Viira
Nov 15 '18 at 5:17
@Viira Sorry I didn't copy my full code this is just the chunk that should make the difference
– VisualExstasy
Nov 15 '18 at 5:20
Why are you using both <img> tag and a background image?
– Viira
Nov 15 '18 at 5:28
I was trying different methods to bring background image darker while keeping the text bright. Originally its a <div class="pimg1"> like below
– VisualExstasy
Nov 15 '18 at 5:30
Ok wait let me decode it
– Viira
Nov 15 '18 at 5:30
|
show 2 more comments
seems like you missing some opening/closing tags
– Viira
Nov 15 '18 at 5:17
@Viira Sorry I didn't copy my full code this is just the chunk that should make the difference
– VisualExstasy
Nov 15 '18 at 5:20
Why are you using both <img> tag and a background image?
– Viira
Nov 15 '18 at 5:28
I was trying different methods to bring background image darker while keeping the text bright. Originally its a <div class="pimg1"> like below
– VisualExstasy
Nov 15 '18 at 5:30
Ok wait let me decode it
– Viira
Nov 15 '18 at 5:30
seems like you missing some opening/closing tags
– Viira
Nov 15 '18 at 5:17
seems like you missing some opening/closing tags
– Viira
Nov 15 '18 at 5:17
@Viira Sorry I didn't copy my full code this is just the chunk that should make the difference
– VisualExstasy
Nov 15 '18 at 5:20
@Viira Sorry I didn't copy my full code this is just the chunk that should make the difference
– VisualExstasy
Nov 15 '18 at 5:20
Why are you using both <img> tag and a background image?
– Viira
Nov 15 '18 at 5:28
Why are you using both <img> tag and a background image?
– Viira
Nov 15 '18 at 5:28
I was trying different methods to bring background image darker while keeping the text bright. Originally its a <div class="pimg1"> like below
– VisualExstasy
Nov 15 '18 at 5:30
I was trying different methods to bring background image darker while keeping the text bright. Originally its a <div class="pimg1"> like below
– VisualExstasy
Nov 15 '18 at 5:30
Ok wait let me decode it
– Viira
Nov 15 '18 at 5:30
Ok wait let me decode it
– Viira
Nov 15 '18 at 5:30
|
show 2 more comments
2 Answers
2
active
oldest
votes
2
Use pseudo elements ::before or ::after
Here you go. Try this
bodywidth:100%;
.pimg1
position:relative;
width:100%;
max-width:48%;
margin-right:1%;
float:left;
height:100vh;
margin-bottom:100px;
.pimg1::before
content:"";
background:url('https://www.w3schools.com/html/clouds.jpg') no-repeat fixed center;
background-size:cover;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
filter:brightness(50%);
z-index:-1;
<body>
<div class="pimg1">
<div class="ptext">
<h1 class="Intro"><strong>Farbod Jahan</strong></h1> <br>
</div>
</div>
<div class="pimg1">
<div class="ptext">
<h1 class="Intro"><strong>Farbod Jahan</strong></h1> <br>
</div>
</div>
<p style="padding-top:30px;">Original Image</p>
<img src="https://www.w3schools.com/html/clouds.jpg">
</body>answered Nov 15 '18 at 5:42
ViiraViira
2,438527
This doesn't work it pushes all the content to the top and the images are dark. I have multiple images on the pages that are revealed when scrolling and text overlayed on each here is the 1st and second pages imgur.com/a/riupw8W
– VisualExstasy
Nov 15 '18 at 5:48
You can align the content if you want to justify them
– Viira
Nov 15 '18 at 5:48
It takes away the image and pushes second to the top. Do you want me to just share my whole code?
– VisualExstasy
Nov 15 '18 at 5:57
Can you made a jsfiddle or codepen?
– Viira
Nov 15 '18 at 6:05
jsfiddle.net/ey7b5rc9/1 the page views right on my local but not on jsfiddle, has to do with the images probably
– VisualExstasy
Nov 15 '18 at 6:10
add a comment |
1
You may looking something like that below:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
html, body
height:100%;
padding:0;
margin:0;
.pimg1, .pimg2
position:relative;
background-position:center;
background-size:cover;
background-repeat:no-repeat;
background-attachment: fixed;
.pimg1::after, .pimg2::after
content:"";
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
background-color:rgba(0,0,0,0.5);
z-index:0;
display:block;
.pimg1
background-image:url('https://via.placeholder.com/550');
min-height: 100%;
.pimg2
background-image:url('https://via.placeholder.com/550');
min-height: 100%;
</style>
</head>
<body>
<div class="pimg1">
<div class="ptext">
<h1 class="Intro"><strong>Farbod Jahan</strong></h1> <br>
</div>
</div>
<div class="pimg2">
<div class="ptext">
<h1 class="openSans"><strong>Who am I</strong></h1> <br>
</div>
</div>
</body>
</html>answered Nov 15 '18 at 5:44
HanifHanif
2,6671611
This just made everything dark rather than just the image
– VisualExstasy
Nov 15 '18 at 5:58
jsfiddle.net/ey7b5rc9/1
– VisualExstasy
Nov 15 '18 at 6:14
add a comment |
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',
autoActivateHeartbeat: false,
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');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53312727%2fparallax-site-with-darken-image-not-text%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
Use pseudo elements ::before or ::after
Here you go. Try this
bodywidth:100%;
.pimg1
position:relative;
width:100%;
max-width:48%;
margin-right:1%;
float:left;
height:100vh;
margin-bottom:100px;
.pimg1::before
content:"";
background:url('https://www.w3schools.com/html/clouds.jpg') no-repeat fixed center;
background-size:cover;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
filter:brightness(50%);
z-index:-1;
<body>
<div class="pimg1">
<div class="ptext">
<h1 class="Intro"><strong>Farbod Jahan</strong></h1> <br>
</div>
</div>
<div class="pimg1">
<div class="ptext">
<h1 class="Intro"><strong>Farbod Jahan</strong></h1> <br>
</div>
</div>
<p style="padding-top:30px;">Original Image</p>
<img src="https://www.w3schools.com/html/clouds.jpg">
</body>answered Nov 15 '18 at 5:42
ViiraViira
2,438527
This doesn't work it pushes all the content to the top and the images are dark. I have multiple images on the pages that are revealed when scrolling and text overlayed on each here is the 1st and second pages imgur.com/a/riupw8W
– VisualExstasy
Nov 15 '18 at 5:48
You can align the content if you want to justify them
– Viira
Nov 15 '18 at 5:48
It takes away the image and pushes second to the top. Do you want me to just share my whole code?
– VisualExstasy
Nov 15 '18 at 5:57
Can you made a jsfiddle or codepen?
– Viira
Nov 15 '18 at 6:05
jsfiddle.net/ey7b5rc9/1 the page views right on my local but not on jsfiddle, has to do with the images probably
– VisualExstasy
Nov 15 '18 at 6:10
add a comment |
2
Use pseudo elements ::before or ::after
Here you go. Try this
bodywidth:100%;
.pimg1
position:relative;
width:100%;
max-width:48%;
margin-right:1%;
float:left;
height:100vh;
margin-bottom:100px;
.pimg1::before
content:"";
background:url('https://www.w3schools.com/html/clouds.jpg') no-repeat fixed center;
background-size:cover;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
filter:brightness(50%);
z-index:-1;
<body>
<div class="pimg1">
<div class="ptext">
<h1 class="Intro"><strong>Farbod Jahan</strong></h1> <br>
</div>
</div>
<div class="pimg1">
<div class="ptext">
<h1 class="Intro"><strong>Farbod Jahan</strong></h1> <br>
</div>
</div>
<p style="padding-top:30px;">Original Image</p>
<img src="https://www.w3schools.com/html/clouds.jpg">
</body>answered Nov 15 '18 at 5:42
ViiraViira
2,438527
This doesn't work it pushes all the content to the top and the images are dark. I have multiple images on the pages that are revealed when scrolling and text overlayed on each here is the 1st and second pages imgur.com/a/riupw8W
– VisualExstasy
Nov 15 '18 at 5:48
You can align the content if you want to justify them
– Viira
Nov 15 '18 at 5:48
It takes away the image and pushes second to the top. Do you want me to just share my whole code?
– VisualExstasy
Nov 15 '18 at 5:57
Can you made a jsfiddle or codepen?
– Viira
Nov 15 '18 at 6:05
jsfiddle.net/ey7b5rc9/1 the page views right on my local but not on jsfiddle, has to do with the images probably
– VisualExstasy
Nov 15 '18 at 6:10
add a comment |
2
2
2
Use pseudo elements ::before or ::after
Here you go. Try this
bodywidth:100%;
.pimg1
position:relative;
width:100%;
max-width:48%;
margin-right:1%;
float:left;
height:100vh;
margin-bottom:100px;
.pimg1::before
content:"";
background:url('https://www.w3schools.com/html/clouds.jpg') no-repeat fixed center;
background-size:cover;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
filter:brightness(50%);
z-index:-1;
<body>
<div class="pimg1">
<div class="ptext">
<h1 class="Intro"><strong>Farbod Jahan</strong></h1> <br>
</div>
</div>
<div class="pimg1">
<div class="ptext">
<h1 class="Intro"><strong>Farbod Jahan</strong></h1> <br>
</div>
</div>
<p style="padding-top:30px;">Original Image</p>
<img src="https://www.w3schools.com/html/clouds.jpg">
</body>answered Nov 15 '18 at 5:42
ViiraViira
2,438527
Use pseudo elements ::before or ::after
Here you go. Try this
bodywidth:100%;
.pimg1
position:relative;
width:100%;
max-width:48%;
margin-right:1%;
float:left;
height:100vh;
margin-bottom:100px;
.pimg1::before
content:"";
background:url('https://www.w3schools.com/html/clouds.jpg') no-repeat fixed center;
background-size:cover;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
filter:brightness(50%);
z-index:-1;
<body>
<div class="pimg1">
<div class="ptext">
<h1 class="Intro"><strong>Farbod Jahan</strong></h1> <br>
</div>
</div>
<div class="pimg1">
<div class="ptext">
<h1 class="Intro"><strong>Farbod Jahan</strong></h1> <br>
</div>
</div>
<p style="padding-top:30px;">Original Image</p>
<img src="https://www.w3schools.com/html/clouds.jpg">
</body>bodywidth:100%;
.pimg1
position:relative;
width:100%;
max-width:48%;
margin-right:1%;
float:left;
height:100vh;
margin-bottom:100px;
.pimg1::before
content:"";
background:url('https://www.w3schools.com/html/clouds.jpg') no-repeat fixed center;
background-size:cover;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
filter:brightness(50%);
z-index:-1;
<body>
<div class="pimg1">
<div class="ptext">
<h1 class="Intro"><strong>Farbod Jahan</strong></h1> <br>
</div>
</div>
<div class="pimg1">
<div class="ptext">
<h1 class="Intro"><strong>Farbod Jahan</strong></h1> <br>
</div>
</div>
<p style="padding-top:30px;">Original Image</p>
<img src="https://www.w3schools.com/html/clouds.jpg">
</body>bodywidth:100%;
.pimg1
position:relative;
width:100%;
max-width:48%;
margin-right:1%;
float:left;
height:100vh;
margin-bottom:100px;
.pimg1::before
content:"";
background:url('https://www.w3schools.com/html/clouds.jpg') no-repeat fixed center;
background-size:cover;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
filter:brightness(50%);
z-index:-1;
<body>
<div class="pimg1">
<div class="ptext">
<h1 class="Intro"><strong>Farbod Jahan</strong></h1> <br>
</div>
</div>
<div class="pimg1">
<div class="ptext">
<h1 class="Intro"><strong>Farbod Jahan</strong></h1> <br>
</div>
</div>
<p style="padding-top:30px;">Original Image</p>
<img src="https://www.w3schools.com/html/clouds.jpg">
</body>answered Nov 15 '18 at 5:42
ViiraViira
2,438527
edited Nov 15 '18 at 5:48
answered Nov 15 '18 at 5:42
ViiraViira
2,438527
answered Nov 15 '18 at 5:42
ViiraViira
2,438527
answered Nov 15 '18 at 5:42
ViiraViira
2,438527
2,438527
This doesn't work it pushes all the content to the top and the images are dark. I have multiple images on the pages that are revealed when scrolling and text overlayed on each here is the 1st and second pages imgur.com/a/riupw8W
– VisualExstasy
Nov 15 '18 at 5:48
You can align the content if you want to justify them
– Viira
Nov 15 '18 at 5:48
It takes away the image and pushes second to the top. Do you want me to just share my whole code?
– VisualExstasy
Nov 15 '18 at 5:57
Can you made a jsfiddle or codepen?
– Viira
Nov 15 '18 at 6:05
jsfiddle.net/ey7b5rc9/1 the page views right on my local but not on jsfiddle, has to do with the images probably
– VisualExstasy
Nov 15 '18 at 6:10
add a comment |
This doesn't work it pushes all the content to the top and the images are dark. I have multiple images on the pages that are revealed when scrolling and text overlayed on each here is the 1st and second pages imgur.com/a/riupw8W
– VisualExstasy
Nov 15 '18 at 5:48
You can align the content if you want to justify them
– Viira
Nov 15 '18 at 5:48
It takes away the image and pushes second to the top. Do you want me to just share my whole code?
– VisualExstasy
Nov 15 '18 at 5:57
Can you made a jsfiddle or codepen?
– Viira
Nov 15 '18 at 6:05
jsfiddle.net/ey7b5rc9/1 the page views right on my local but not on jsfiddle, has to do with the images probably
– VisualExstasy
Nov 15 '18 at 6:10
This doesn't work it pushes all the content to the top and the images are dark. I have multiple images on the pages that are revealed when scrolling and text overlayed on each here is the 1st and second pages imgur.com/a/riupw8W
– VisualExstasy
Nov 15 '18 at 5:48
This doesn't work it pushes all the content to the top and the images are dark. I have multiple images on the pages that are revealed when scrolling and text overlayed on each here is the 1st and second pages imgur.com/a/riupw8W
– VisualExstasy
Nov 15 '18 at 5:48
You can align the content if you want to justify them
– Viira
Nov 15 '18 at 5:48
You can align the content if you want to justify them
– Viira
Nov 15 '18 at 5:48
It takes away the image and pushes second to the top. Do you want me to just share my whole code?
– VisualExstasy
Nov 15 '18 at 5:57
It takes away the image and pushes second to the top. Do you want me to just share my whole code?
– VisualExstasy
Nov 15 '18 at 5:57
Can you made a jsfiddle or codepen?
– Viira
Nov 15 '18 at 6:05
Can you made a jsfiddle or codepen?
– Viira
Nov 15 '18 at 6:05
jsfiddle.net/ey7b5rc9/1 the page views right on my local but not on jsfiddle, has to do with the images probably
– VisualExstasy
Nov 15 '18 at 6:10
jsfiddle.net/ey7b5rc9/1 the page views right on my local but not on jsfiddle, has to do with the images probably
– VisualExstasy
Nov 15 '18 at 6:10
add a comment |
1
You may looking something like that below:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
html, body
height:100%;
padding:0;
margin:0;
.pimg1, .pimg2
position:relative;
background-position:center;
background-size:cover;
background-repeat:no-repeat;
background-attachment: fixed;
.pimg1::after, .pimg2::after
content:"";
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
background-color:rgba(0,0,0,0.5);
z-index:0;
display:block;
.pimg1
background-image:url('https://via.placeholder.com/550');
min-height: 100%;
.pimg2
background-image:url('https://via.placeholder.com/550');
min-height: 100%;
</style>
</head>
<body>
<div class="pimg1">
<div class="ptext">
<h1 class="Intro"><strong>Farbod Jahan</strong></h1> <br>
</div>
</div>
<div class="pimg2">
<div class="ptext">
<h1 class="openSans"><strong>Who am I</strong></h1> <br>
</div>
</div>
</body>
</html>answered Nov 15 '18 at 5:44
HanifHanif
2,6671611
This just made everything dark rather than just the image
– VisualExstasy
Nov 15 '18 at 5:58
jsfiddle.net/ey7b5rc9/1
– VisualExstasy
Nov 15 '18 at 6:14
add a comment |
1
You may looking something like that below:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
html, body
height:100%;
padding:0;
margin:0;
.pimg1, .pimg2
position:relative;
background-position:center;
background-size:cover;
background-repeat:no-repeat;
background-attachment: fixed;
.pimg1::after, .pimg2::after
content:"";
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
background-color:rgba(0,0,0,0.5);
z-index:0;
display:block;
.pimg1
background-image:url('https://via.placeholder.com/550');
min-height: 100%;
.pimg2
background-image:url('https://via.placeholder.com/550');
min-height: 100%;
</style>
</head>
<body>
<div class="pimg1">
<div class="ptext">
<h1 class="Intro"><strong>Farbod Jahan</strong></h1> <br>
</div>
</div>
<div class="pimg2">
<div class="ptext">
<h1 class="openSans"><strong>Who am I</strong></h1> <br>
</div>
</div>
</body>
</html>answered Nov 15 '18 at 5:44
HanifHanif
2,6671611
This just made everything dark rather than just the image
– VisualExstasy
Nov 15 '18 at 5:58
jsfiddle.net/ey7b5rc9/1
– VisualExstasy
Nov 15 '18 at 6:14
add a comment |
1
1
1
You may looking something like that below:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
html, body
height:100%;
padding:0;
margin:0;
.pimg1, .pimg2
position:relative;
background-position:center;
background-size:cover;
background-repeat:no-repeat;
background-attachment: fixed;
.pimg1::after, .pimg2::after
content:"";
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
background-color:rgba(0,0,0,0.5);
z-index:0;
display:block;
.pimg1
background-image:url('https://via.placeholder.com/550');
min-height: 100%;
.pimg2
background-image:url('https://via.placeholder.com/550');
min-height: 100%;
</style>
</head>
<body>
<div class="pimg1">
<div class="ptext">
<h1 class="Intro"><strong>Farbod Jahan</strong></h1> <br>
</div>
</div>
<div class="pimg2">
<div class="ptext">
<h1 class="openSans"><strong>Who am I</strong></h1> <br>
</div>
</div>
</body>
</html>answered Nov 15 '18 at 5:44
HanifHanif
2,6671611
You may looking something like that below:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
html, body
height:100%;
padding:0;
margin:0;
.pimg1, .pimg2
position:relative;
background-position:center;
background-size:cover;
background-repeat:no-repeat;
background-attachment: fixed;
.pimg1::after, .pimg2::after
content:"";
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
background-color:rgba(0,0,0,0.5);
z-index:0;
display:block;
.pimg1
background-image:url('https://via.placeholder.com/550');
min-height: 100%;
.pimg2
background-image:url('https://via.placeholder.com/550');
min-height: 100%;
</style>
</head>
<body>
<div class="pimg1">
<div class="ptext">
<h1 class="Intro"><strong>Farbod Jahan</strong></h1> <br>
</div>
</div>
<div class="pimg2">
<div class="ptext">
<h1 class="openSans"><strong>Who am I</strong></h1> <br>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title></title>
<style>
html, body
height:100%;
padding:0;
margin:0;
.pimg1, .pimg2
position:relative;
background-position:center;
background-size:cover;
background-repeat:no-repeat;
background-attachment: fixed;
.pimg1::after, .pimg2::after
content:"";
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
background-color:rgba(0,0,0,0.5);
z-index:0;
display:block;
.pimg1
background-image:url('https://via.placeholder.com/550');
min-height: 100%;
.pimg2
background-image:url('https://via.placeholder.com/550');
min-height: 100%;
</style>
</head>
<body>
<div class="pimg1">
<div class="ptext">
<h1 class="Intro"><strong>Farbod Jahan</strong></h1> <br>
</div>
</div>
<div class="pimg2">
<div class="ptext">
<h1 class="openSans"><strong>Who am I</strong></h1> <br>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title></title>
<style>
html, body
height:100%;
padding:0;
margin:0;
.pimg1, .pimg2
position:relative;
background-position:center;
background-size:cover;
background-repeat:no-repeat;
background-attachment: fixed;
.pimg1::after, .pimg2::after
content:"";
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
background-color:rgba(0,0,0,0.5);
z-index:0;
display:block;
.pimg1
background-image:url('https://via.placeholder.com/550');
min-height: 100%;
.pimg2
background-image:url('https://via.placeholder.com/550');
min-height: 100%;
</style>
</head>
<body>
<div class="pimg1">
<div class="ptext">
<h1 class="Intro"><strong>Farbod Jahan</strong></h1> <br>
</div>
</div>
<div class="pimg2">
<div class="ptext">
<h1 class="openSans"><strong>Who am I</strong></h1> <br>
</div>
</div>
</body>
</html>answered Nov 15 '18 at 5:44
HanifHanif
2,6671611
answered Nov 15 '18 at 5:44
HanifHanif
2,6671611
answered Nov 15 '18 at 5:44
HanifHanif
2,6671611
answered Nov 15 '18 at 5:44
HanifHanif
2,6671611
2,6671611
This just made everything dark rather than just the image
– VisualExstasy
Nov 15 '18 at 5:58
jsfiddle.net/ey7b5rc9/1
– VisualExstasy
Nov 15 '18 at 6:14
add a comment |
This just made everything dark rather than just the image
– VisualExstasy
Nov 15 '18 at 5:58
jsfiddle.net/ey7b5rc9/1
– VisualExstasy
Nov 15 '18 at 6:14
This just made everything dark rather than just the image
– VisualExstasy
Nov 15 '18 at 5:58
This just made everything dark rather than just the image
– VisualExstasy
Nov 15 '18 at 5:58
jsfiddle.net/ey7b5rc9/1
– VisualExstasy
Nov 15 '18 at 6:14
jsfiddle.net/ey7b5rc9/1
– VisualExstasy
Nov 15 '18 at 6:14
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53312727%2fparallax-site-with-darken-image-not-text%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
seems like you missing some opening/closing tags
– Viira
Nov 15 '18 at 5:17
@Viira Sorry I didn't copy my full code this is just the chunk that should make the difference
– VisualExstasy
Nov 15 '18 at 5:20
Why are you using both <img> tag and a background image?
– Viira
Nov 15 '18 at 5:28
I was trying different methods to bring background image darker while keeping the text bright. Originally its a <div class="pimg1"> like below
– VisualExstasy
Nov 15 '18 at 5:30
Ok wait let me decode it
– Viira
Nov 15 '18 at 5:30