Parallax webpage darken image but not text
1
I am creating a parallax webpage with 3 images on it however I want the image to be darken and the texts to not be but when I adjust filter brightness the whole thing is darkened. I have also added columns to my 3rd page but it seems that having the columns keeps it unaligned and having the bottom left hand not aligned with the rest of the text.
HTML
<!DOCTYPTE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Web Page</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<div>
<div class="pimg1">
<div class="ptext">
<h1 class="Intro"><strong>Intro </strong></h1> <br>
</div>
</div>
<div class="pimg2">
<div class="ptext">
<h1 class="openSans"><strong>Who am I</strong></h1> <br>
<p> Words and stuff
</p>
</div>
</div>
<div class="pimg3">
<div class="ptext">
<h1 class="openSans"><strong>How I Work</strong></h1>
<div class="column">
<i class="fas fa-search" style="color:#1d5ba0; padding: 10px"></i>
<h2>Research</h2>
<p>Words.</p>
</div>
<div class="column">
<i class="fas fa-flask" style="color:#1d5ba0; padding: 10px"></i>
<h2>Design</h2>
<p>Words.</p>
</div>
<div class="column">
<i class="fas fa-code" style="color:#1d5ba0; padding: 10px"></i>
<h2>Build</h2>
<p>Words.</p>
</div>
<div class="column">
<i class="fas fa-retweet" style="color:#1d5ba0; padding: 10px"></i>
<h2>Refine </h2>
<p>Words.</p>
</div>
</div>
</div>
</body>
</html>
CSS
body, html
height:100%;
margin:0;
font-size:16px;
font-family:"Lato", sans-serif;
font-weight: 400px;
line-height: 1.8em;
color:#666;
.pimg1, .pimg2, .pimg3
position:relative;
background-position:center;
background-size:cover;
background-repeat:no-repeat;
background-attachment: fixed;
filter:brightness(50%);
.pimg1
background-image:url('../img/image1.jpg');
min-height: 100%;
.pimg2
background-image:url('../img/image2.jpg');
min-height: 100%;
.pimg3
background-image:url('../img/image3.jpg');
min-height: 100%;
.ptext
position:absolute;
top:50%;
width: 100%;
text-align:center;
color:#000;
font-size: 40px;
h1
display: block;
font-size: 2em;
margin-block-start: auto;
margin-block-end: auto;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
.openSans
font-family: Open Sans!important;
color:white;
h1.Intro
font-family: Open Sans!important;
color:white;
margin-block-start: -3em;
h2
font-size: 1em;
margin-block-start: auto;
font-weight: bold;
text-align: center;
p
font-size: 14px;
color: white;
display: block;
margin-left:auto;
margin-right:auto;
width: 35em;
text-align: center;
.column
float: left;
width: 47%;
padding: 15px;
html css multiple-columns parallax
asked Nov 15 '18 at 21:56
VisualExstasyVisualExstasy
8918
add a comment |
1
I am creating a parallax webpage with 3 images on it however I want the image to be darken and the texts to not be but when I adjust filter brightness the whole thing is darkened. I have also added columns to my 3rd page but it seems that having the columns keeps it unaligned and having the bottom left hand not aligned with the rest of the text.
HTML
<!DOCTYPTE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Web Page</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<div>
<div class="pimg1">
<div class="ptext">
<h1 class="Intro"><strong>Intro </strong></h1> <br>
</div>
</div>
<div class="pimg2">
<div class="ptext">
<h1 class="openSans"><strong>Who am I</strong></h1> <br>
<p> Words and stuff
</p>
</div>
</div>
<div class="pimg3">
<div class="ptext">
<h1 class="openSans"><strong>How I Work</strong></h1>
<div class="column">
<i class="fas fa-search" style="color:#1d5ba0; padding: 10px"></i>
<h2>Research</h2>
<p>Words.</p>
</div>
<div class="column">
<i class="fas fa-flask" style="color:#1d5ba0; padding: 10px"></i>
<h2>Design</h2>
<p>Words.</p>
</div>
<div class="column">
<i class="fas fa-code" style="color:#1d5ba0; padding: 10px"></i>
<h2>Build</h2>
<p>Words.</p>
</div>
<div class="column">
<i class="fas fa-retweet" style="color:#1d5ba0; padding: 10px"></i>
<h2>Refine </h2>
<p>Words.</p>
</div>
</div>
</div>
</body>
</html>
CSS
body, html
height:100%;
margin:0;
font-size:16px;
font-family:"Lato", sans-serif;
font-weight: 400px;
line-height: 1.8em;
color:#666;
.pimg1, .pimg2, .pimg3
position:relative;
background-position:center;
background-size:cover;
background-repeat:no-repeat;
background-attachment: fixed;
filter:brightness(50%);
.pimg1
background-image:url('../img/image1.jpg');
min-height: 100%;
.pimg2
background-image:url('../img/image2.jpg');
min-height: 100%;
.pimg3
background-image:url('../img/image3.jpg');
min-height: 100%;
.ptext
position:absolute;
top:50%;
width: 100%;
text-align:center;
color:#000;
font-size: 40px;
h1
display: block;
font-size: 2em;
margin-block-start: auto;
margin-block-end: auto;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
.openSans
font-family: Open Sans!important;
color:white;
h1.Intro
font-family: Open Sans!important;
color:white;
margin-block-start: -3em;
h2
font-size: 1em;
margin-block-start: auto;
font-weight: bold;
text-align: center;
p
font-size: 14px;
color: white;
display: block;
margin-left:auto;
margin-right:auto;
width: 35em;
text-align: center;
.column
float: left;
width: 47%;
padding: 15px;
html css multiple-columns parallax
asked Nov 15 '18 at 21:56
VisualExstasyVisualExstasy
8918
add a comment |
1
1
1
I am creating a parallax webpage with 3 images on it however I want the image to be darken and the texts to not be but when I adjust filter brightness the whole thing is darkened. I have also added columns to my 3rd page but it seems that having the columns keeps it unaligned and having the bottom left hand not aligned with the rest of the text.
HTML
<!DOCTYPTE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Web Page</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<div>
<div class="pimg1">
<div class="ptext">
<h1 class="Intro"><strong>Intro </strong></h1> <br>
</div>
</div>
<div class="pimg2">
<div class="ptext">
<h1 class="openSans"><strong>Who am I</strong></h1> <br>
<p> Words and stuff
</p>
</div>
</div>
<div class="pimg3">
<div class="ptext">
<h1 class="openSans"><strong>How I Work</strong></h1>
<div class="column">
<i class="fas fa-search" style="color:#1d5ba0; padding: 10px"></i>
<h2>Research</h2>
<p>Words.</p>
</div>
<div class="column">
<i class="fas fa-flask" style="color:#1d5ba0; padding: 10px"></i>
<h2>Design</h2>
<p>Words.</p>
</div>
<div class="column">
<i class="fas fa-code" style="color:#1d5ba0; padding: 10px"></i>
<h2>Build</h2>
<p>Words.</p>
</div>
<div class="column">
<i class="fas fa-retweet" style="color:#1d5ba0; padding: 10px"></i>
<h2>Refine </h2>
<p>Words.</p>
</div>
</div>
</div>
</body>
</html>
CSS
body, html
height:100%;
margin:0;
font-size:16px;
font-family:"Lato", sans-serif;
font-weight: 400px;
line-height: 1.8em;
color:#666;
.pimg1, .pimg2, .pimg3
position:relative;
background-position:center;
background-size:cover;
background-repeat:no-repeat;
background-attachment: fixed;
filter:brightness(50%);
.pimg1
background-image:url('../img/image1.jpg');
min-height: 100%;
.pimg2
background-image:url('../img/image2.jpg');
min-height: 100%;
.pimg3
background-image:url('../img/image3.jpg');
min-height: 100%;
.ptext
position:absolute;
top:50%;
width: 100%;
text-align:center;
color:#000;
font-size: 40px;
h1
display: block;
font-size: 2em;
margin-block-start: auto;
margin-block-end: auto;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
.openSans
font-family: Open Sans!important;
color:white;
h1.Intro
font-family: Open Sans!important;
color:white;
margin-block-start: -3em;
h2
font-size: 1em;
margin-block-start: auto;
font-weight: bold;
text-align: center;
p
font-size: 14px;
color: white;
display: block;
margin-left:auto;
margin-right:auto;
width: 35em;
text-align: center;
.column
float: left;
width: 47%;
padding: 15px;
html css multiple-columns parallax
asked Nov 15 '18 at 21:56
VisualExstasyVisualExstasy
8918
I am creating a parallax webpage with 3 images on it however I want the image to be darken and the texts to not be but when I adjust filter brightness the whole thing is darkened. I have also added columns to my 3rd page but it seems that having the columns keeps it unaligned and having the bottom left hand not aligned with the rest of the text.
HTML
<!DOCTYPTE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Web Page</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<div>
<div class="pimg1">
<div class="ptext">
<h1 class="Intro"><strong>Intro </strong></h1> <br>
</div>
</div>
<div class="pimg2">
<div class="ptext">
<h1 class="openSans"><strong>Who am I</strong></h1> <br>
<p> Words and stuff
</p>
</div>
</div>
<div class="pimg3">
<div class="ptext">
<h1 class="openSans"><strong>How I Work</strong></h1>
<div class="column">
<i class="fas fa-search" style="color:#1d5ba0; padding: 10px"></i>
<h2>Research</h2>
<p>Words.</p>
</div>
<div class="column">
<i class="fas fa-flask" style="color:#1d5ba0; padding: 10px"></i>
<h2>Design</h2>
<p>Words.</p>
</div>
<div class="column">
<i class="fas fa-code" style="color:#1d5ba0; padding: 10px"></i>
<h2>Build</h2>
<p>Words.</p>
</div>
<div class="column">
<i class="fas fa-retweet" style="color:#1d5ba0; padding: 10px"></i>
<h2>Refine </h2>
<p>Words.</p>
</div>
</div>
</div>
</body>
</html>
CSS
body, html
height:100%;
margin:0;
font-size:16px;
font-family:"Lato", sans-serif;
font-weight: 400px;
line-height: 1.8em;
color:#666;
.pimg1, .pimg2, .pimg3
position:relative;
background-position:center;
background-size:cover;
background-repeat:no-repeat;
background-attachment: fixed;
filter:brightness(50%);
.pimg1
background-image:url('../img/image1.jpg');
min-height: 100%;
.pimg2
background-image:url('../img/image2.jpg');
min-height: 100%;
.pimg3
background-image:url('../img/image3.jpg');
min-height: 100%;
.ptext
position:absolute;
top:50%;
width: 100%;
text-align:center;
color:#000;
font-size: 40px;
h1
display: block;
font-size: 2em;
margin-block-start: auto;
margin-block-end: auto;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
.openSans
font-family: Open Sans!important;
color:white;
h1.Intro
font-family: Open Sans!important;
color:white;
margin-block-start: -3em;
h2
font-size: 1em;
margin-block-start: auto;
font-weight: bold;
text-align: center;
p
font-size: 14px;
color: white;
display: block;
margin-left:auto;
margin-right:auto;
width: 35em;
text-align: center;
.column
float: left;
width: 47%;
padding: 15px;
html css multiple-columns parallax
html css multiple-columns parallax
asked Nov 15 '18 at 21:56
VisualExstasyVisualExstasy
8918
asked Nov 15 '18 at 21:56
VisualExstasyVisualExstasy
8918
asked Nov 15 '18 at 21:56
VisualExstasyVisualExstasy
8918
asked Nov 15 '18 at 21:56
VisualExstasyVisualExstasy
8918
asked Nov 15 '18 at 21:56
VisualExstasyVisualExstasy
8918
8918
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
0
It sounds like you've almost answered it yourself. If you want to adjust the brightness on the image and not the text you can't adjust the "whole thing". You'll need to make sure the image and the text are separate in html and then adjust the image alone using its id or class.
For example: you might have a
<div id="allinone">text</div>
that has the image assigned within css. to separate them you'd instead want:
<div id="notallinone">
text
<img class="darkenedImg" src="yourimageurl.png"/>
</div>
Where you can add styles to the #notallinone and .darkenedImg css blocks separately
answered Nov 15 '18 at 23:12
AlexandraAlexandra
6917
I tried doing that but when I do the image gets removed or all the text goes to the top of the first page not on each separate one
– VisualExstasy
Nov 15 '18 at 23:15
Can you post your code with the image separate? It's unlikely that it gets removed. If you're using chrome, when you are looking at your website in browser you can press Ctrl + Shift + i and you'll be able to look through the HTML elements, and when you hover over the image you'll be able to see where it is, and what dimensions it has. If the little hover text says 0 x 0 then it is possible that you'll need to set the width and height attributes of the div.
– Alexandra
Nov 15 '18 at 23:20
Each image/text pair should be in a separate div, and if they are then you can control when they're seen as a unit by adjusting the opacity or z-index of the image/text's parent divs. If the text is at the top, you'll have to give some CSS to the <p> element to change that, such as #parentdiv p margin-top: calc( 50% - 22px);
– Alexandra
Nov 15 '18 at 23:21
Sorry I should have clarified that I'd need you to post the code as an update to your question, I can't download something like that on my work computer for security reasons.
– Alexandra
Nov 15 '18 at 23:24
So post the updated code with the divs you mentioned?
– VisualExstasy
Nov 15 '18 at 23:26
|
show 2 more comments
0
I just managed to darken the image and then upload to my workspace which does the same thing
answered Nov 16 '18 at 6:44
VisualExstasyVisualExstasy
8918
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%2f53328463%2fparallax-webpage-darken-image-but-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
0
It sounds like you've almost answered it yourself. If you want to adjust the brightness on the image and not the text you can't adjust the "whole thing". You'll need to make sure the image and the text are separate in html and then adjust the image alone using its id or class.
For example: you might have a
<div id="allinone">text</div>
that has the image assigned within css. to separate them you'd instead want:
<div id="notallinone">
text
<img class="darkenedImg" src="yourimageurl.png"/>
</div>
Where you can add styles to the #notallinone and .darkenedImg css blocks separately
answered Nov 15 '18 at 23:12
AlexandraAlexandra
6917
I tried doing that but when I do the image gets removed or all the text goes to the top of the first page not on each separate one
– VisualExstasy
Nov 15 '18 at 23:15
Can you post your code with the image separate? It's unlikely that it gets removed. If you're using chrome, when you are looking at your website in browser you can press Ctrl + Shift + i and you'll be able to look through the HTML elements, and when you hover over the image you'll be able to see where it is, and what dimensions it has. If the little hover text says 0 x 0 then it is possible that you'll need to set the width and height attributes of the div.
– Alexandra
Nov 15 '18 at 23:20
Each image/text pair should be in a separate div, and if they are then you can control when they're seen as a unit by adjusting the opacity or z-index of the image/text's parent divs. If the text is at the top, you'll have to give some CSS to the <p> element to change that, such as #parentdiv p margin-top: calc( 50% - 22px);
– Alexandra
Nov 15 '18 at 23:21
Sorry I should have clarified that I'd need you to post the code as an update to your question, I can't download something like that on my work computer for security reasons.
– Alexandra
Nov 15 '18 at 23:24
So post the updated code with the divs you mentioned?
– VisualExstasy
Nov 15 '18 at 23:26
|
show 2 more comments
0
It sounds like you've almost answered it yourself. If you want to adjust the brightness on the image and not the text you can't adjust the "whole thing". You'll need to make sure the image and the text are separate in html and then adjust the image alone using its id or class.
For example: you might have a
<div id="allinone">text</div>
that has the image assigned within css. to separate them you'd instead want:
<div id="notallinone">
text
<img class="darkenedImg" src="yourimageurl.png"/>
</div>
Where you can add styles to the #notallinone and .darkenedImg css blocks separately
answered Nov 15 '18 at 23:12
AlexandraAlexandra
6917
I tried doing that but when I do the image gets removed or all the text goes to the top of the first page not on each separate one
– VisualExstasy
Nov 15 '18 at 23:15
Can you post your code with the image separate? It's unlikely that it gets removed. If you're using chrome, when you are looking at your website in browser you can press Ctrl + Shift + i and you'll be able to look through the HTML elements, and when you hover over the image you'll be able to see where it is, and what dimensions it has. If the little hover text says 0 x 0 then it is possible that you'll need to set the width and height attributes of the div.
– Alexandra
Nov 15 '18 at 23:20
Each image/text pair should be in a separate div, and if they are then you can control when they're seen as a unit by adjusting the opacity or z-index of the image/text's parent divs. If the text is at the top, you'll have to give some CSS to the <p> element to change that, such as #parentdiv p margin-top: calc( 50% - 22px);
– Alexandra
Nov 15 '18 at 23:21
Sorry I should have clarified that I'd need you to post the code as an update to your question, I can't download something like that on my work computer for security reasons.
– Alexandra
Nov 15 '18 at 23:24
So post the updated code with the divs you mentioned?
– VisualExstasy
Nov 15 '18 at 23:26
|
show 2 more comments
0
0
0
It sounds like you've almost answered it yourself. If you want to adjust the brightness on the image and not the text you can't adjust the "whole thing". You'll need to make sure the image and the text are separate in html and then adjust the image alone using its id or class.
For example: you might have a
<div id="allinone">text</div>
that has the image assigned within css. to separate them you'd instead want:
<div id="notallinone">
text
<img class="darkenedImg" src="yourimageurl.png"/>
</div>
Where you can add styles to the #notallinone and .darkenedImg css blocks separately
answered Nov 15 '18 at 23:12
AlexandraAlexandra
6917
It sounds like you've almost answered it yourself. If you want to adjust the brightness on the image and not the text you can't adjust the "whole thing". You'll need to make sure the image and the text are separate in html and then adjust the image alone using its id or class.
For example: you might have a
<div id="allinone">text</div>
that has the image assigned within css. to separate them you'd instead want:
<div id="notallinone">
text
<img class="darkenedImg" src="yourimageurl.png"/>
</div>
Where you can add styles to the #notallinone and .darkenedImg css blocks separately
answered Nov 15 '18 at 23:12
AlexandraAlexandra
6917
answered Nov 15 '18 at 23:12
AlexandraAlexandra
6917
answered Nov 15 '18 at 23:12
AlexandraAlexandra
6917
answered Nov 15 '18 at 23:12
AlexandraAlexandra
6917
6917
I tried doing that but when I do the image gets removed or all the text goes to the top of the first page not on each separate one
– VisualExstasy
Nov 15 '18 at 23:15
Can you post your code with the image separate? It's unlikely that it gets removed. If you're using chrome, when you are looking at your website in browser you can press Ctrl + Shift + i and you'll be able to look through the HTML elements, and when you hover over the image you'll be able to see where it is, and what dimensions it has. If the little hover text says 0 x 0 then it is possible that you'll need to set the width and height attributes of the div.
– Alexandra
Nov 15 '18 at 23:20
Each image/text pair should be in a separate div, and if they are then you can control when they're seen as a unit by adjusting the opacity or z-index of the image/text's parent divs. If the text is at the top, you'll have to give some CSS to the <p> element to change that, such as #parentdiv p margin-top: calc( 50% - 22px);
– Alexandra
Nov 15 '18 at 23:21
Sorry I should have clarified that I'd need you to post the code as an update to your question, I can't download something like that on my work computer for security reasons.
– Alexandra
Nov 15 '18 at 23:24
So post the updated code with the divs you mentioned?
– VisualExstasy
Nov 15 '18 at 23:26
|
show 2 more comments
I tried doing that but when I do the image gets removed or all the text goes to the top of the first page not on each separate one
– VisualExstasy
Nov 15 '18 at 23:15
Can you post your code with the image separate? It's unlikely that it gets removed. If you're using chrome, when you are looking at your website in browser you can press Ctrl + Shift + i and you'll be able to look through the HTML elements, and when you hover over the image you'll be able to see where it is, and what dimensions it has. If the little hover text says 0 x 0 then it is possible that you'll need to set the width and height attributes of the div.
– Alexandra
Nov 15 '18 at 23:20
Each image/text pair should be in a separate div, and if they are then you can control when they're seen as a unit by adjusting the opacity or z-index of the image/text's parent divs. If the text is at the top, you'll have to give some CSS to the <p> element to change that, such as #parentdiv p margin-top: calc( 50% - 22px);
– Alexandra
Nov 15 '18 at 23:21
Sorry I should have clarified that I'd need you to post the code as an update to your question, I can't download something like that on my work computer for security reasons.
– Alexandra
Nov 15 '18 at 23:24
So post the updated code with the divs you mentioned?
– VisualExstasy
Nov 15 '18 at 23:26
I tried doing that but when I do the image gets removed or all the text goes to the top of the first page not on each separate one
– VisualExstasy
Nov 15 '18 at 23:15
I tried doing that but when I do the image gets removed or all the text goes to the top of the first page not on each separate one
– VisualExstasy
Nov 15 '18 at 23:15
Can you post your code with the image separate? It's unlikely that it gets removed. If you're using chrome, when you are looking at your website in browser you can press Ctrl + Shift + i and you'll be able to look through the HTML elements, and when you hover over the image you'll be able to see where it is, and what dimensions it has. If the little hover text says 0 x 0 then it is possible that you'll need to set the width and height attributes of the div.
– Alexandra
Nov 15 '18 at 23:20
Can you post your code with the image separate? It's unlikely that it gets removed. If you're using chrome, when you are looking at your website in browser you can press Ctrl + Shift + i and you'll be able to look through the HTML elements, and when you hover over the image you'll be able to see where it is, and what dimensions it has. If the little hover text says 0 x 0 then it is possible that you'll need to set the width and height attributes of the div.
– Alexandra
Nov 15 '18 at 23:20
Each image/text pair should be in a separate div, and if they are then you can control when they're seen as a unit by adjusting the opacity or z-index of the image/text's parent divs. If the text is at the top, you'll have to give some CSS to the <p> element to change that, such as #parentdiv p margin-top: calc( 50% - 22px);
– Alexandra
Nov 15 '18 at 23:21
Each image/text pair should be in a separate div, and if they are then you can control when they're seen as a unit by adjusting the opacity or z-index of the image/text's parent divs. If the text is at the top, you'll have to give some CSS to the <p> element to change that, such as #parentdiv p margin-top: calc( 50% - 22px);
– Alexandra
Nov 15 '18 at 23:21
Sorry I should have clarified that I'd need you to post the code as an update to your question, I can't download something like that on my work computer for security reasons.
– Alexandra
Nov 15 '18 at 23:24
Sorry I should have clarified that I'd need you to post the code as an update to your question, I can't download something like that on my work computer for security reasons.
– Alexandra
Nov 15 '18 at 23:24
So post the updated code with the divs you mentioned?
– VisualExstasy
Nov 15 '18 at 23:26
So post the updated code with the divs you mentioned?
– VisualExstasy
Nov 15 '18 at 23:26
|
show 2 more comments
0
I just managed to darken the image and then upload to my workspace which does the same thing
answered Nov 16 '18 at 6:44
VisualExstasyVisualExstasy
8918
add a comment |
0
I just managed to darken the image and then upload to my workspace which does the same thing
answered Nov 16 '18 at 6:44
VisualExstasyVisualExstasy
8918
add a comment |
0
0
0
I just managed to darken the image and then upload to my workspace which does the same thing
answered Nov 16 '18 at 6:44
VisualExstasyVisualExstasy
8918
I just managed to darken the image and then upload to my workspace which does the same thing
answered Nov 16 '18 at 6:44
VisualExstasyVisualExstasy
8918
answered Nov 16 '18 at 6:44
VisualExstasyVisualExstasy
8918
answered Nov 16 '18 at 6:44
VisualExstasyVisualExstasy
8918
answered Nov 16 '18 at 6:44
VisualExstasyVisualExstasy
8918
8918
add a comment |
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%2f53328463%2fparallax-webpage-darken-image-but-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
