So I'm creating a landing page with a 100vh image that has a faded white overlay, using the following:
#showcase {
display: flex;
flex-direction: column;
align-items: center;
background-image: url('../img/showcase.jpeg');
background-attachment: fixed;
height: 100vh;
position: relative;
z-index: -2;
}
#showcase:after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(#eee, 0.7);
z-index: -1;
}
<section id="showcase">
<img id="logo" src="img/logo.png" alt="" />
<h1 class="display-4 text-center">Test text</h1>
DO SOMETING
</section>
It works a treat expect for when I try add a button or anchor tag to the content of the div I can't seem to click or highlight it. Text in h tag and the image can be highlighted fine
Just remove the z-index:-2 from the parent and then position the child with a higher z-index
#showcase {
display: flex;
flex-direction: column;
align-items: center;
background: lightblue;
height: 100vh;
position: relative;
/* z-index: -2; -- remove this */
}
#showcase:after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.7);
}
#showcase * {
position: relative;
z-index: 1;
}
<section id="showcase">
<img id="logo" src="img/logo.png" alt="" />
<h1 class="display-4 text-center">Test text</h1>
DO SOMETING
</section>
Just z-index issue.
#showcase {
display: flex;
flex-direction: column;
align-items: center;
background-image: url(../img/showcase.jpeg);
background-attachment: fixed;
height: 100vh;
position: relative;
/* z-index: -2; Remove this line*/
}
Related
I want my position fixed to viewport text to change color depending on where you are on the website. I tried adding position absolute containers, which would be clipped by the text, but it doesn't seem to work. E.g. text is black on white background, but white on every other color.
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles2.css">
</head>
<body>
<div>
<h1 class="header">Header</h1>
<div class="fp-container-1"></div>
<div class="fp-container-2"></div>
<div class="fp-container-3"></div>
</div>
</body>
</html>
CSS:
body {
font-family: 'Roboto', sans-serif;
overflow-x: hidden;
margin: 0;
}
.header {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
width:100vw;
top: 10vh;
z-index: 1;
}
.fp-container-1 {
display: flex;
position: absolute;
top: 0vh;
height: 100vh;
width: 100vw;
background-color: white;
}
.fp-container-2 {
display: flex;
position: absolute;
top: 100vh;
height: 100vh;
width: 100vw;
background-color: blue;
}
.fp-container-3 {
display: flex;
position: absolute;
top: 150vh;
height: 200vh;
width: 100vw;
background-color: yellowgreen;
clip-path: url(.header);
z-index: -1;
}
I want my fixed-position text to be visible no matter the background. I considered using mix-blend-mode or adding clipping mask to the text, which would be invisible on the website but visible only "through" the text, but I don't know how to do that. My mix-blend-mode doesn't seem to work either.
body {
font-family: 'Roboto', sans-serif;
overflow-x: hidden;
margin: 0;
}
.header {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
width: 100vw;
top: 10vh;
z-index: 1;
mix-blend-mode: difference;
}
.fp-container-1 {
display: flex;
justify-content: center;
top: 0vh;
height: 100vh;
width: 100vw;
background-color: white;
}
.fp-container-2 {
display: flex;
justify-content: center;
top: 0vh;
height: 100vh;
width: 100vw;
background-color: blue;
}
<div class="blending-group">
<h1 class="header">Header</h1>
<div class="fp-container-1"></div>
<div class="fp-container-2"></div>
</div>
You need to set a background-color on the element you set the mix-blend-mode. Otherwise, the container will have a background-color of transparent by default and therefore have nothing against which to calculate the difference (or whatever mode you chose).
* {
margin: 0;
}
body {
font-family: 'Roboto', sans-serif;
}
.header {
position: fixed;
width: 100%;
top: 0;
mix-blend-mode: difference;
background: cadetblue;
}
.fp-container-1 {
height: 100vh;
}
.fp-container-2 {
height: 100vh;
background-color: cadetblue;
}
<div class="blending-group">
<h1 class="header">Header</h1>
<div class="fp-container-1"></div>
<div class="fp-container-2"></div>
</div>
How do I make a div roll on top of another div while scrolling? I tried using z-index but doesn't seem to work the code as I want. Please look at the images below.
I want the green div to be on top of the "App Name Here" div (to cover it), and not below it. How should I do that? Here is the code I'm using
HTML
<div class="header">
<div>
<h1><span style="color: rgb(133, 13, 13);">App Name </span><span style="color: rgb(39, 161, 15);">Here</span></h1>
</div>
</div>
<div class="box1">
<header>
<h2 style="text-align: center;margin-bottom:15px;font-family:cursive;">Info.</h2>
</header>
<p>
Lorem Ipsum is simply .....
</p>
</div>
CSS
* {
margin: 0;
padding: 0;
}
body{
background-image: url("social_media_background_small.jpg");
background-attachment: fixed;
background-size: cover;
}
.box1 {
height: 90vh;
background-color: aquamarine;
z-index: 99;
border-radius: 12px;
padding: 2rem;
}
.box1 p{
text-align: justify;
}
.header {
background-color: rgb(27, 21, 21);
opacity: 0.75;
height: 60vh;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
position: sticky;
top: 0;
}
.header div{
z-index: 0;
}
.header div h1 {
font-size: 3rem;
z-index: 0;
}
You need to position the box1 element:
.box1 {
position: relative;
height: 90vh;
background-color: aquamarine;
z-index: 99;
border-radius: 12px;
padding: 2rem;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
I need to make an image take the maximum size (taking max width or max height) in a flex container.
Since the parent container doesn't have a fixed width and height, I can't use max-width and max-height and flex:1 is not working either.
Here is an example of the problem : https://jsfiddle.net/vb26u0e5/2/
I would like the image to take automaticaly all the available green space (remove the width: 40px; line 20).
#mainContainer {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
color: white;
}
#imageContainer {
flex: 1;
display: flex;
justify-content: space-between;
background-color: green;
}
#image {
width: 40px;
}
#previous,
#next {
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
padding: 0 10px;
background-color: purple;
}
#title,
#footer {
text-align: center;
}
#title {
background-color: blue;
}
#footer {
background-color: red;
}
<div id="mainContainer">
<div id="title">TITLE</div>
<div id="imageContainer">
<div id="previous"><</div>
<img id="image" src="https://via.placeholder.com/1920x1080" />
<div id="next">></div>
</div>
<div id="footer">FOOTER</div>
</div>
Add this to your code:
#image {
width: 40px;
flex-grow: 1; /* new */
}
Normally, you would be able to use flex-basis (which is equivalent to width, in this case), and do some like this:
#image {
flex: 1; /* fg:1, fs:1, fb:0 */
}
OR
#image {
flex: 1 0 40px;
}
However, some browsers have a bug which causes them to ignore flex-basis in nested flex containers. So the width / flex-grow combination is a clean workaround.
For more details see the "Browser Bugs" section in my answer here:
What are the differences between flex-basis and width?
The demo below covers the issue answered above, plus height issues – aspect ratio and vertical scroll – by wrapping the image in a div and using absolute positioning and object-fit on the image.
Tested in Chrome, Firefox and Edge.
#mainContainer {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
color: white;
}
#imageContainer {
flex: 1;
display: flex;
justify-content: space-between;
background-color: green;
}
#image {
flex-grow: 1;
position: relative;
}
img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
#previous,
#next {
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
padding: 0 10px;
background-color: purple;
}
#title,
#footer {
text-align: center;
}
#title {
background-color: blue;
}
#footer {
background-color: red;
}
<div id="mainContainer">
<div id="title">TITLE</div>
<div id="imageContainer">
<div id="previous"><</div>
<div id="image">
<img src="https://pixabay.com/get/52e3dc454f50a414f6d1867dda6d49214b6ac3e45657744e7d2b72dc90/oldtimer-4396528_1920.jpg" />
</div>
<div id="next">></div>
</div>
<div id="footer">FOOTER</div>
</div>
jsFiddle
use object-fit property to specify how the image should be resized to fit its container. I have set it to object-fit: cover which will cut off the sides of the image, preserving the aspect ratio, and also filling in the space. Also use flex-grow:1 to fill the 'green' space.
#mainContainer {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
color: white;
}
#imageContainer {
display: flex;
justify-content: space-between;
background-color: green;
}
#image {
object-fit: cover;
flex-grow: 1;
height: 100%;
overflow: hidden;
}
#previous,
#next {
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
padding: 0 10px;
background-color: purple;
}
#title,
#footer {
text-align: center;
}
#title {
background-color: blue;
}
#footer {
background-color: red;
}
<div id="mainContainer">
<div id="title">TITLE</div>
<div id="imageContainer">
<div id="previous"><</div>
<img id="image" src="https://via.placeholder.com/1920x1080" />
<div id="next">></div>
</div>
<div id="footer">FOOTER</div>
</div>
You can calc the width based on Vertical Width (100vw) & remove the padding of your PREV/NEXT
Something like this?
#mainContainer {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
color: white;
}
#imageContainer {
flex: 1;
display: flex;
justify-content: space-between;
background-color: green;
}
#image {
width: calc(100vw - 50px);
height: 100vh;
}
#previous,
#next {
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
padding: 0 10px;
background-color: purple;
}
#title,
#footer {
text-align: center;
}
#title {
background-color: blue;
}
#footer {
background-color: red;
}
<div id="mainContainer">
<div id="title">TITLE</div>
<div id="imageContainer">
<div id="previous"><</div>
<img id="image" src="https://via.placeholder.com/1920x1080" />
<div id="next">></div>
</div>
<div id="footer">FOOTER</div>
</div>
I'm not quite understanding what rule of stacking context I am not understanding here. I have a 'divider' line ('divider-line') that I want to put behind a box div ('block').
Here is the HTML:
<div class="report-title">
<div class="divider-line"></div>
<div class="block">
<div class="icon">0</div>
<h1 class="text">FOO BAR</h1>
</div>
</div>
Here is the CSS(w/ scss nesting):
.report-title {
display: flex;
align-items: center;
flex-direction: column;
position: relative;
width: 100%;
margin: 100px 0;
.block {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: -100px;
z-index: 10;
height: 200px;
width: 475px;
.icon {
font-size: 9rem;
}
.text {
display: block;
}
}
.divider-line {
width: 100%;
height: 1px;
background-color: gray;
}
}
The HTML context, having 'divider-line' child come before it's sibling 'block' should put it behind no? The z-index of 10 on 'block' doesn't do anything, and I've tried putting a z-index of -1 on 'divider-line' as well (to no avail).
Any advice or direction would be great,
Without the z-index in you example, adding a background colour to the block shows that the divider is behind the block.
.report-title {
display: flex;
align-items: center;
flex-direction: column;
position: relative;
width: 100%;
margin: 100px 0;
}
.block {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
background-color: #FFF;
top: -100px;
height: 200px;
width: 475px;
}
.icon {
font-size: 9rem;
}
.text {
display: block;
}
.divider-line {
width: 100%;
height: 1px;
background-color: gray;
}
<div class="report-title">
<div class="divider-line"></div>
<div class="block">
<div class="icon">0</div>
<h1 class="text">FOO BAR</h1>
</div>
</div>