After doing a transform on a Parallax div, My background gradient Isn't covering the whole background
0
I am having a strange styling issue with two divs I am working on in css.
The requirements of these divs is that they must be skewed and translated (which I'm doing through a transform), they must have a gradient on the backgrounds, and the backgrounds must have parallax scrolling.
The issue is that this causes part of the background image to not be affected by the gradient.
The current code I am using on these divs is as follows:
HTML:
<div class="diag gradient-bg2">
<div class='diag-wrapper banner3'>
<h1><?=$banner3Header1?></h1>
<p><?=$banner3Content1?></p>
</div>
</div>
<div class="diag gradient-bg3">
<div class='diag-wrapper banner4'>
<h1><?=$banner4Header1?></h1>
<p><?=$banner4Content1?></p>
<a class="btn" id="get-started-btn">ASK AN EXPERT</a>
</div>
</div>
CSS:
.diag
padding: 5% 20px;
-webkit-transform: skewY(-3deg) translateY(-5vw);
-moz-transform: skewY(-3deg) translateY(-5vw);
-ms-transform: skewY(-3deg) translateY(-5vw);
-o-transform: skewY(-3deg) translateY(-5vw);
transform: skewY(-3deg) translateY(-5vw) ;
/*this unskews the content in a skewed div. It should be the opposite of above values**/
.diag > .diag-wrapper
padding-top:5vh;
-webkit-transform: skewY(3deg);
-moz-transform: skewY(3deg);
-ms-transform: skewY(3deg);
-o-transform: skewY(3deg);
transform: skewY(3deg);
.gradient-bg2
margin:0;
background: linear-gradient(0deg,rgba(255, 255, 255, 0.97),rgba(255, 255, 255, 0.7)), url("../img/mri.png") 50%;
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
.gradient-bg3
margin:0;
background: linear-gradient(to right,rgba(11, 179, 199, 1),rgba(154, 202, 73, 0.7)), url("../img/mri2.png");
height: 100%;
background-attachment: fixed;
background-position: right;
background-repeat: no-repeat;
background-size:auto 100%;
.banner3
text-align: center;
padding: 10vh 20vw 10vh 20vw;
.banner4
color:white;
padding-top:10vh;
padding-bottom:10vh;
padding-left:16vw;
padding-right:57vw;
Something to note is that aside from the gradient error, these divs are functioning exactly as required. Here is a screenshot of what the issue looks like:
First Div
Second Div
Does anybody have any idea what could be causing this issue, and how this issue could be solved?
css transform gradient parallax
edited Nov 14 '18 at 9:47
Love Buddha
907
asked Nov 14 '18 at 8:30
Andrew JohnsonAndrew Johnson
11
add a comment |
0
I am having a strange styling issue with two divs I am working on in css.
The requirements of these divs is that they must be skewed and translated (which I'm doing through a transform), they must have a gradient on the backgrounds, and the backgrounds must have parallax scrolling.
The issue is that this causes part of the background image to not be affected by the gradient.
The current code I am using on these divs is as follows:
HTML:
<div class="diag gradient-bg2">
<div class='diag-wrapper banner3'>
<h1><?=$banner3Header1?></h1>
<p><?=$banner3Content1?></p>
</div>
</div>
<div class="diag gradient-bg3">
<div class='diag-wrapper banner4'>
<h1><?=$banner4Header1?></h1>
<p><?=$banner4Content1?></p>
<a class="btn" id="get-started-btn">ASK AN EXPERT</a>
</div>
</div>
CSS:
.diag
padding: 5% 20px;
-webkit-transform: skewY(-3deg) translateY(-5vw);
-moz-transform: skewY(-3deg) translateY(-5vw);
-ms-transform: skewY(-3deg) translateY(-5vw);
-o-transform: skewY(-3deg) translateY(-5vw);
transform: skewY(-3deg) translateY(-5vw) ;
/*this unskews the content in a skewed div. It should be the opposite of above values**/
.diag > .diag-wrapper
padding-top:5vh;
-webkit-transform: skewY(3deg);
-moz-transform: skewY(3deg);
-ms-transform: skewY(3deg);
-o-transform: skewY(3deg);
transform: skewY(3deg);
.gradient-bg2
margin:0;
background: linear-gradient(0deg,rgba(255, 255, 255, 0.97),rgba(255, 255, 255, 0.7)), url("../img/mri.png") 50%;
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
.gradient-bg3
margin:0;
background: linear-gradient(to right,rgba(11, 179, 199, 1),rgba(154, 202, 73, 0.7)), url("../img/mri2.png");
height: 100%;
background-attachment: fixed;
background-position: right;
background-repeat: no-repeat;
background-size:auto 100%;
.banner3
text-align: center;
padding: 10vh 20vw 10vh 20vw;
.banner4
color:white;
padding-top:10vh;
padding-bottom:10vh;
padding-left:16vw;
padding-right:57vw;
Something to note is that aside from the gradient error, these divs are functioning exactly as required. Here is a screenshot of what the issue looks like:
First Div
Second Div
Does anybody have any idea what could be causing this issue, and how this issue could be solved?
css transform gradient parallax
edited Nov 14 '18 at 9:47
Love Buddha
907
asked Nov 14 '18 at 8:30
Andrew JohnsonAndrew Johnson
11
Do you expect to see a background outside of the boundaries of an element, or what?
– misorude
Nov 14 '18 at 8:36
@misorude That's not what I am expecting. The issue is that while the background is visible inside the boundaries of the element (as intended), the gradient is only affecting a certain part of the background rather than the entire thing. This is best demonstrated by the first image, where you can more clearly see the part of the image that isn't affected by the gradient
– Andrew Johnson
Nov 14 '18 at 8:39
I don’t see how that part of the image shows there in the first place - you skewed the element, so that part of the screen should not be covered by any background, neither gradient nor image, to begin with … unless that’s the same image applied as background to a different, non-skewed container element or something. Can you please show a proper live example of this, including images?
– misorude
Nov 14 '18 at 8:43
No, it doesn’t - because you skewed it.
– misorude
Nov 14 '18 at 8:50
Thanks for the thoughts. This discussion has given me the idea to try an alternative method of making the background. If I get it working I will update this post for future niche confusion
– Andrew Johnson
Nov 14 '18 at 9:13
add a comment |
0
0
0
I am having a strange styling issue with two divs I am working on in css.
The requirements of these divs is that they must be skewed and translated (which I'm doing through a transform), they must have a gradient on the backgrounds, and the backgrounds must have parallax scrolling.
The issue is that this causes part of the background image to not be affected by the gradient.
The current code I am using on these divs is as follows:
HTML:
<div class="diag gradient-bg2">
<div class='diag-wrapper banner3'>
<h1><?=$banner3Header1?></h1>
<p><?=$banner3Content1?></p>
</div>
</div>
<div class="diag gradient-bg3">
<div class='diag-wrapper banner4'>
<h1><?=$banner4Header1?></h1>
<p><?=$banner4Content1?></p>
<a class="btn" id="get-started-btn">ASK AN EXPERT</a>
</div>
</div>
CSS:
.diag
padding: 5% 20px;
-webkit-transform: skewY(-3deg) translateY(-5vw);
-moz-transform: skewY(-3deg) translateY(-5vw);
-ms-transform: skewY(-3deg) translateY(-5vw);
-o-transform: skewY(-3deg) translateY(-5vw);
transform: skewY(-3deg) translateY(-5vw) ;
/*this unskews the content in a skewed div. It should be the opposite of above values**/
.diag > .diag-wrapper
padding-top:5vh;
-webkit-transform: skewY(3deg);
-moz-transform: skewY(3deg);
-ms-transform: skewY(3deg);
-o-transform: skewY(3deg);
transform: skewY(3deg);
.gradient-bg2
margin:0;
background: linear-gradient(0deg,rgba(255, 255, 255, 0.97),rgba(255, 255, 255, 0.7)), url("../img/mri.png") 50%;
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
.gradient-bg3
margin:0;
background: linear-gradient(to right,rgba(11, 179, 199, 1),rgba(154, 202, 73, 0.7)), url("../img/mri2.png");
height: 100%;
background-attachment: fixed;
background-position: right;
background-repeat: no-repeat;
background-size:auto 100%;
.banner3
text-align: center;
padding: 10vh 20vw 10vh 20vw;
.banner4
color:white;
padding-top:10vh;
padding-bottom:10vh;
padding-left:16vw;
padding-right:57vw;
Something to note is that aside from the gradient error, these divs are functioning exactly as required. Here is a screenshot of what the issue looks like:
First Div
Second Div
Does anybody have any idea what could be causing this issue, and how this issue could be solved?
css transform gradient parallax
edited Nov 14 '18 at 9:47
Love Buddha
907
asked Nov 14 '18 at 8:30
Andrew JohnsonAndrew Johnson
11
I am having a strange styling issue with two divs I am working on in css.
The requirements of these divs is that they must be skewed and translated (which I'm doing through a transform), they must have a gradient on the backgrounds, and the backgrounds must have parallax scrolling.
The issue is that this causes part of the background image to not be affected by the gradient.
The current code I am using on these divs is as follows:
HTML:
<div class="diag gradient-bg2">
<div class='diag-wrapper banner3'>
<h1><?=$banner3Header1?></h1>
<p><?=$banner3Content1?></p>
</div>
</div>
<div class="diag gradient-bg3">
<div class='diag-wrapper banner4'>
<h1><?=$banner4Header1?></h1>
<p><?=$banner4Content1?></p>
<a class="btn" id="get-started-btn">ASK AN EXPERT</a>
</div>
</div>
CSS:
.diag
padding: 5% 20px;
-webkit-transform: skewY(-3deg) translateY(-5vw);
-moz-transform: skewY(-3deg) translateY(-5vw);
-ms-transform: skewY(-3deg) translateY(-5vw);
-o-transform: skewY(-3deg) translateY(-5vw);
transform: skewY(-3deg) translateY(-5vw) ;
/*this unskews the content in a skewed div. It should be the opposite of above values**/
.diag > .diag-wrapper
padding-top:5vh;
-webkit-transform: skewY(3deg);
-moz-transform: skewY(3deg);
-ms-transform: skewY(3deg);
-o-transform: skewY(3deg);
transform: skewY(3deg);
.gradient-bg2
margin:0;
background: linear-gradient(0deg,rgba(255, 255, 255, 0.97),rgba(255, 255, 255, 0.7)), url("../img/mri.png") 50%;
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
.gradient-bg3
margin:0;
background: linear-gradient(to right,rgba(11, 179, 199, 1),rgba(154, 202, 73, 0.7)), url("../img/mri2.png");
height: 100%;
background-attachment: fixed;
background-position: right;
background-repeat: no-repeat;
background-size:auto 100%;
.banner3
text-align: center;
padding: 10vh 20vw 10vh 20vw;
.banner4
color:white;
padding-top:10vh;
padding-bottom:10vh;
padding-left:16vw;
padding-right:57vw;
Something to note is that aside from the gradient error, these divs are functioning exactly as required. Here is a screenshot of what the issue looks like:
First Div
Second Div
Does anybody have any idea what could be causing this issue, and how this issue could be solved?
css transform gradient parallax
css transform gradient parallax
edited Nov 14 '18 at 9:47
Love Buddha
907
asked Nov 14 '18 at 8:30
Andrew JohnsonAndrew Johnson
11
edited Nov 14 '18 at 9:47
Love Buddha
907
asked Nov 14 '18 at 8:30
Andrew JohnsonAndrew Johnson
11
edited Nov 14 '18 at 9:47
Love Buddha
907
edited Nov 14 '18 at 9:47
Love Buddha
907
edited Nov 14 '18 at 9:47
Love Buddha
907
907
asked Nov 14 '18 at 8:30
Andrew JohnsonAndrew Johnson
11
asked Nov 14 '18 at 8:30
Andrew JohnsonAndrew Johnson
11
asked Nov 14 '18 at 8:30
Andrew JohnsonAndrew Johnson
11
11
Do you expect to see a background outside of the boundaries of an element, or what?
– misorude
Nov 14 '18 at 8:36
@misorude That's not what I am expecting. The issue is that while the background is visible inside the boundaries of the element (as intended), the gradient is only affecting a certain part of the background rather than the entire thing. This is best demonstrated by the first image, where you can more clearly see the part of the image that isn't affected by the gradient
– Andrew Johnson
Nov 14 '18 at 8:39
I don’t see how that part of the image shows there in the first place - you skewed the element, so that part of the screen should not be covered by any background, neither gradient nor image, to begin with … unless that’s the same image applied as background to a different, non-skewed container element or something. Can you please show a proper live example of this, including images?
– misorude
Nov 14 '18 at 8:43
No, it doesn’t - because you skewed it.
– misorude
Nov 14 '18 at 8:50
Thanks for the thoughts. This discussion has given me the idea to try an alternative method of making the background. If I get it working I will update this post for future niche confusion
– Andrew Johnson
Nov 14 '18 at 9:13
add a comment |
Do you expect to see a background outside of the boundaries of an element, or what?
– misorude
Nov 14 '18 at 8:36
@misorude That's not what I am expecting. The issue is that while the background is visible inside the boundaries of the element (as intended), the gradient is only affecting a certain part of the background rather than the entire thing. This is best demonstrated by the first image, where you can more clearly see the part of the image that isn't affected by the gradient
– Andrew Johnson
Nov 14 '18 at 8:39
I don’t see how that part of the image shows there in the first place - you skewed the element, so that part of the screen should not be covered by any background, neither gradient nor image, to begin with … unless that’s the same image applied as background to a different, non-skewed container element or something. Can you please show a proper live example of this, including images?
– misorude
Nov 14 '18 at 8:43
No, it doesn’t - because you skewed it.
– misorude
Nov 14 '18 at 8:50
Thanks for the thoughts. This discussion has given me the idea to try an alternative method of making the background. If I get it working I will update this post for future niche confusion
– Andrew Johnson
Nov 14 '18 at 9:13
Do you expect to see a background outside of the boundaries of an element, or what?
– misorude
Nov 14 '18 at 8:36
Do you expect to see a background outside of the boundaries of an element, or what?
– misorude
Nov 14 '18 at 8:36
@misorude That's not what I am expecting. The issue is that while the background is visible inside the boundaries of the element (as intended), the gradient is only affecting a certain part of the background rather than the entire thing. This is best demonstrated by the first image, where you can more clearly see the part of the image that isn't affected by the gradient
– Andrew Johnson
Nov 14 '18 at 8:39
@misorude That's not what I am expecting. The issue is that while the background is visible inside the boundaries of the element (as intended), the gradient is only affecting a certain part of the background rather than the entire thing. This is best demonstrated by the first image, where you can more clearly see the part of the image that isn't affected by the gradient
– Andrew Johnson
Nov 14 '18 at 8:39
I don’t see how that part of the image shows there in the first place - you skewed the element, so that part of the screen should not be covered by any background, neither gradient nor image, to begin with … unless that’s the same image applied as background to a different, non-skewed container element or something. Can you please show a proper live example of this, including images?
– misorude
Nov 14 '18 at 8:43
I don’t see how that part of the image shows there in the first place - you skewed the element, so that part of the screen should not be covered by any background, neither gradient nor image, to begin with … unless that’s the same image applied as background to a different, non-skewed container element or something. Can you please show a proper live example of this, including images?
– misorude
Nov 14 '18 at 8:43
No, it doesn’t - because you skewed it.
– misorude
Nov 14 '18 at 8:50
No, it doesn’t - because you skewed it.
– misorude
Nov 14 '18 at 8:50
Thanks for the thoughts. This discussion has given me the idea to try an alternative method of making the background. If I get it working I will update this post for future niche confusion
– Andrew Johnson
Nov 14 '18 at 9:13
Thanks for the thoughts. This discussion has given me the idea to try an alternative method of making the background. If I get it working I will update this post for future niche confusion
– Andrew Johnson
Nov 14 '18 at 9:13
add a comment |
0
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',
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%2f53295876%2fafter-doing-a-transform-on-a-parallax-div-my-background-gradient-isnt-covering%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53295876%2fafter-doing-a-transform-on-a-parallax-div-my-background-gradient-isnt-covering%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
Do you expect to see a background outside of the boundaries of an element, or what?
– misorude
Nov 14 '18 at 8:36
@misorude That's not what I am expecting. The issue is that while the background is visible inside the boundaries of the element (as intended), the gradient is only affecting a certain part of the background rather than the entire thing. This is best demonstrated by the first image, where you can more clearly see the part of the image that isn't affected by the gradient
– Andrew Johnson
Nov 14 '18 at 8:39
I don’t see how that part of the image shows there in the first place - you skewed the element, so that part of the screen should not be covered by any background, neither gradient nor image, to begin with … unless that’s the same image applied as background to a different, non-skewed container element or something. Can you please show a proper live example of this, including images?
– misorude
Nov 14 '18 at 8:43
No, it doesn’t - because you skewed it.
– misorude
Nov 14 '18 at 8:50
Thanks for the thoughts. This discussion has given me the idea to try an alternative method of making the background. If I get it working I will update this post for future niche confusion
– Andrew Johnson
Nov 14 '18 at 9:13