I have two sibling elements which each contain dynamic content.
<div class="flex">
<div class="sibling-1"></div>
<div class="sibling-2"></div>
</div>
In some cases sibling-1 will have more content then sibling-2 and vice versa.
I would like the height of the second element sibling-2 always equal the height of the first sibling-1. If the height of sibling-2 is greater then the height of sibling-1 it will overflow the flex div and thus be scrollable.
Is there any way to accomplish this with Flexbox?
Yes, it is possible. Leave the sibling setting the max height alone and set the others' flex-basis: 0 and flex-grow: 1, which according to the spec will expand them to their sibling's height. No absolute positioning. No setting height on any elements.
main {
display: flex;
}
section {
display: flex;
flex-direction: column;
width: 7em;
border: thin solid black;
margin: 1em;
}
:not(.limiter)>div {
flex-basis: 0px;
flex-grow: 1;
overflow-y: auto;
}
<main>
<section>
<div>I'm longer and will scroll my overflow. in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text
in flow text in flow text in flow text in flow text in flow text in flow text in</div>
</section>
<section class="limiter">
<div>Every parent's siblings match my height. in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text</div>
</section>
<section>
<div>I'm shorter but still match the height. in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text</div>
</section>
</main>
Is there any way to accomplish this with Flexbox?
Basically, no. The flex equal heights feature is based on the height of the container, not any particular sibling.
So sibling-1 and sibling-2 can always be equal height.
But flexbox has no built-in mechanism to limit the height of items to the height of one sibling.
Consider JavaScript or CSS positioning properties.
Here's an example using absolute positioning:
.flex {
display: flex;
width: 200px;
position: relative;
}
.flex>div {
flex: 0 0 50%;
border: 1px solid black;
box-sizing: border-box;
}
.sibling-2 {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
right: 0;
overflow: auto;
}
<div class="flex">
<div class="sibling-1">text<br>text<br>text<br>text<br>text<br>text<br></div>
<div class="sibling-2">text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br></div>
</div>
jsFiddle
Yes you can accomplish this by making siblings 1 and 2 also flex containers, then on sibling-2 make an absolute div (also flex container) inside that will be the parent of your scroller
<div class="sibling-1 flex sibling"></div>
<div class="sibling-2 flex sibling">
<div class="absolute flex scroller-wrap">
<div class="relative vertical-scroller">
your content here
</div>
</div>
</div>
css:
.relative{
position:relative;
}
.absolute{
position:absolute;
}
.flex{
display:flex;
}
.sibling-2{
flex:1;
}
.scroller-wrap{
height:100%;
}
on sibling 2 just set a minimum height on pixels - useful on responsive cases if siblings 1 and 2 stack each other on mobile
As I mentioned in the comments and has been continued in other answers, there is no flexbox method.
It is possible using position:absolute on the second sibling though...but since that's not actually a flexbox solution, this is here for information only.
.flex {
margin: 1rem auto;
position: relative;
display: flex;
}
.sibling-1 {
flex: 0 0 50%;
}
.sibling-2 {
position: absolute;
right: 0;
width: 50%;
height: 100%;
overflow: auto;
}
* {
margin: 0;
outline: 0;
}
.flex {
width: 80%;
margin: 1rem auto;
border: 1px solid grey;
position: relative;
display: flex;
}
.sibling-1 {
flex: 0 0 50%;
}
.sibling-2 {
position: absolute;
right: 0;
width: 50%;
height: 100%;
overflow: auto;
}
<div class="flex">
<div class="sibling-1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore quia, voluptatum! Perspiciatis praesentium nemo, labore mollitia numquam recusandae voluptatem consectetur amet deleniti cum nesciunt blanditiis, esse quis doloremque vero! Reiciendis
porro impedit perspiciatis. Amet in praesentium molestias ipsum ad quis quia doloribus, veniam unde, ea ducimus rerum porro tenetur voluptatem, a laudantium. Accusantium provident voluptatibus perferendis hic blanditiis laborum amet consequatur
esse, fugiat doloremque consectetur ullam sequi, ratione perspiciatis, voluptatem eaque vitae rem repellendus in architecto vel nulla animi neque. Accusantium animi voluptatum, suscipit possimus,</p>
</div>
<div class="sibling-2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque modi quibusdam aliquam officia illo itaque ratione, iste architecto ad blanditiis fugiat sequi laborum cupiditate voluptatum, autem non? Quibusdam ad eius hic rem id. Libero, tempora
dicta reiciendis placeat nihil quia fuga iste aliquid quo minus labore sapiente fugit, similique non aliquam, beatae pariatur nobis fugiat! Ipsam nobis fugit maxime aliquam accusamus explicabo nostrum ab nemo adipisci dolorem qui porro ea pariatur
corporis aut reiciendis optio, sint eum nam suscipit itaque aspernatur recusandae. Cumque qui quod doloremque. Ut voluptates, asperiores, laborum excepturi quam odit, quos rerum assumenda sapiente saepe nisi? Numquam placeat repellat eum dolorem
reprehenderit dolores culpa id explicabo consequuntur. Quas nobis veritatis tempora animi similique earum commodi, laborum blanditiis dolor illo, eaque accusamus aliquid nam a ex, velit, maiores natus. Id totam ullam corporis. Repellat aperiam,
distinctio maxime, dolorum illum labore recusandae. Sequi repellendus provident deserunt amet culpa, ratione dignissimos! Quibusdam delectus mollitia, ducimus. Error id architecto, ea molestias voluptate impedit inventore amet ducimus modi repellat
in. Asperiores soluta veritatis id eius, distinctio nisi voluptates voluptatibus iste iusto error officia tempore! Ducimus sed commodi quisquam provident iure voluptatum aliquam, nobis rem dolore, consectetur, dolor rerum eum nam adipisci, libero
beatae eaque aliquid sapiente? Eius, earum quas nostrum quasi reiciendis officia quaerat omnis. Cupiditate suscipit et tempora quibusdam perspiciatis eius cum, nisi facere animi. Delectus magnam inventore ipsum, veritatis reiciendis. Ipsum adipisci
recusandae, similique quas labore voluptas animi eaque velit, alias eveniet qui libero obcaecati suscipit, quam nihil quos placeat.</p>
</div>
</div>
From your code and to avoid extra wrapping , sticky on a side, height:0 on the other then overflow:auto on the parent can also do the job with flex:
example (you will easily understand it)
.flex {
display: flex;
/* demo purpose */
width: 500px;
border: solid;
overflow: auto;/* make the parent scroll */
gap:0.5em;
}
.flex .sibling-1 {
position: sticky;/* stick the reference for the height */
top: 0;
}
.flex .sibling-2 {
height: 0;/* give it no height to start from and let the parent show the scrollbar */
}
<div class="flex">
<div class="sibling-1">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
facilisis luctus, metus</p>
</div>
<div class="sibling-2">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
facilisis luctus, metus</p>
</div>
</div>
My simplified (to me at least) code snippet based on Lucent's answer:
main {
display: flex;
font-family: "nunito"
}
section1 {
display: flex;
flex-direction: column;
width: 15rem;
border: thin solid gray;
}
section2 {
display: flex;
flex-direction: column;
width: 15rem;
border: thin solid gray;
}
section1 > div {
flex-basis: 0px;
flex-grow: 1;
overflow-y: auto;
}
<main>
<section1 class="scroll">
<div>I'm a div in section 1 ---
I have extra css rules of flex-basis 0px (making me as small as possible), flex 1 (making me fill up available space), and overflow y auto (making me scroll the extra content) --- My parent section 1 is a flex column --- My grandparent main is a flex row ---</div>
</section1>
<section2>
<div>I'm a div in section 2. --- My parent section 2 is a flex column --- My grandparent main is a flex row --- The height of the div in section 1 will adjust to my height.</div>
</section2>
</main>
This is the reference of the result i want
I tried putting this in css
body {
background: black;
}
p {
color: #333;
margin: 0;
padding: 0;
background: url('https://i.stack.imgur.com/TaaMS.jpg');
text-align: justify;
filter: grayscale(100%);
background-position: center;
background-attachment: fixed;
background-clip: text;
-webkit-background-clip: text;
-webkit-background-fill-color: rgba(255, 255, 255, 255);
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit
ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor.
Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas, justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero.Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem eget ipsum vulputate dapibus. Vivamus a dui malesuada,
posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas, justo porttitor ornare tristique, velit neque pulvinar
ligula, vitae feugiat risus magna consequat libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet
imperdiet ligula porta a. Vestibulum tristique sem eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id
lectus eget urna finibus tincidunt. Maecenas egestas, justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt
accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla
facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas, justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna
consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum
tristique sem eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas
egestas, justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci,
ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula
porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas, justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem eget ipsum vulputate dapibus. Vivamus
a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas, justo porttitor ornare tristique, velit
neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum
eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida.
Cras id lectus eget urna finibus tincidunt. Maecenas egestas, justo porttitor ornare tristique, velit neque pulvinar ligula,</p>
but it doesn't seem to work
The image I am using
Add an extra background layer with blending and make sure the text color is transparent. You can then easily control the blend mode and the transparency of the extra layer:
body {
background: black;
}
p {
margin: 0;
padding: 0;
line-height:1em;
font-size:14px;
background:
linear-gradient(rgba(0,0,0,1),rgba(0,0,0,1)),
url('https://i.stack.imgur.com/TaaMS.jpg') center/cover;
text-align: justify;
background-attachment: fixed;
background-clip: text;
-webkit-background-clip: text;
-webkit-background-fill-color: transaprent;
color:transparent;
background-blend-mode:color;
}
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero .</p>
Or with filter but also keep the text transparent:
body {
background: black;
}
p {
margin: 0;
padding: 0;
line-height:1em;
font-size:14px;
background:
url('https://i.stack.imgur.com/TaaMS.jpg') center/cover;
text-align: justify;
background-attachment: fixed;
background-clip: text;
-webkit-background-clip: text;
-webkit-background-fill-color: transaprent;
color:transparent;
filter:grayscale(100%);
}
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero .</p>
Your result already displayed the image, but:
Your line-height and font-size should be set at a low px amount
to see the image better on top of the text you should increase the contrast and brightness
This is my approach:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin: 0;
background:black;
font-family:Arial, Helvetica, sans-serif;
}
.wrapper {
color: black;
background:url('https://i.stack.imgur.com/TaaMS.jpg') ;
text-align: justify;
filter: grayscale(100%) contrast(1.1) brightness(5);
background-position: center ;
background-attachment:fixed;
background-blend-mode: overlay;
background-clip: text;
-webkit-background-clip: text;
-webkit-background-fill-color:rgba(255, 255,255,255);
line-height: 12px;
font-size: 12px;
}
</style>
</head>
<body>
<div class="wrapper">
Lorem ipsum dolor sit amet consectetur adipisicing elit. A saepe sit vero sunt animi, possimus adipisci dignissimos, impedit velit error, nam labore? Soluta, ratione! Non blanditiis quaerat ratione nisi aspernatur.
Repellendus, dolor maiores aut quae ut sed fuga aliquid cum, minima in totam reprehenderit magni debitis officia earum quaerat omnis vel delectus? Iure veniam facilis harum, necessitatibus officiis aliquid cumque.
Amet, mollitia. Natus rerum iusto adipisci possimus tenetur. Odio hic quidem tempora, magnam quia dicta quam veniam pariatur rerum incidunt ipsum a veritatis aut autem asperiores laudantium ratione vero deserunt?
Quos amet cum, numquam nulla nisi corrupti quae accusantium. Ipsa sit odit delectus incidunt! Quam, quo maxime. Nam vero deleniti sint eveniet ducimus, illum magni laboriosam maiores mollitia, alias necessitatibus.
Mollitia iure impedit, blanditiis iste velit est nisi esse odio corporis. Ut mollitia illo soluta tenetur nisi provident deleniti aperiam praesentium non unde consectetur quia veritatis blanditiis dicta, suscipit placeat!
Quia temporibus ipsa, qui porro modi enim similique, aliquam dolorem fuga unde dolorum sint totam saepe velit veritatis harum dolor commodi quibusdam sapiente adipisci nam non! Non doloremque vero magnam.
Magnam quae, voluptatum enim tempora consequatur facilis odio quis, corrupti ab aperiam itaque autem accusantium similique assumenda voluptatem aliquam! Quod dolorem molestiae illum illo magnam fugiat temporibus qui voluptas modi.
Assumenda quos numquam voluptas voluptatibus minus obcaecati incidunt recusandae repudiandae iusto provident adipisci enim fugiat, doloribus delectus sit iste suscipit, temporibus mollitia facere deserunt illo maiores est? Reprehenderit, consectetur vitae?
Numquam, vitae aliquam. Placeat sequi aut aspernatur similique voluptatem ea voluptatibus quaerat earum suscipit explicabo doloribus nam animi, pariatur a perferendis et voluptatum exercitationem delectus quibusdam obcaecati temporibus fugiat. Voluptate!
Quia voluptate alias, voluptatum consectetur dolorum assumenda quam amet voluptas, sapiente voluptatem quasi aliquam aspernatur eos dolor voluptatibus veritatis. Reprehenderit sed ipsum consectetur iusto ut consequatur autem quibusdam, accusantium et.
Quidem, provident accusamus incidunt non sunt ut similique tempore, corrupti eos harum molestias obcaecati ipsum repellat asperiores consectetur expedita eius id maiores iure commodi a corporis! Sit laboriosam eaque facere.
Soluta, error fugiat? Possimus non blanditiis ex fugiat voluptas dignissimos. Obcaecati atque recusandae labore delectus soluta accusamus dolorum qui, alias cumque excepturi ad animi iste consequatur fuga! Deleniti, cum sit!
Fugiat nobis magni ipsam consectetur in, dicta, error, aliquam perspiciatis doloribus illo atque laborum! Rem harum ab voluptates quae aliquid odit, quam sunt. Soluta consequatur fugit vitae hic, ipsa est.
Hic, est nulla recusandae ex eveniet voluptas ipsum dolor odit, excepturi ab modi consectetur culpa repellat doloremque similique. Quod ipsa ex distinctio molestias molestiae nemo autem? Fugit culpa consequuntur iusto?
Neque quisquam dicta veritatis quod accusantium itaque repudiandae possimus consequatur blanditiis. Harum voluptas eius, facere iste quaerat nam ratione dolor fuga cum praesentium voluptatum eaque quis impedit nisi quia. Quo.
Aperiam nisi voluptatibus necessitatibus expedita sunt natus inventore, architecto amet dolor eveniet molestias corrupti quibusdam aliquid saepe qui vitae animi ipsum maiores numquam sequi esse repellat molestiae est. Voluptates, enim.
Explicabo vel animi, delectus quisquam doloribus ipsa enim nulla dicta pariatur ipsum asperiores eos adipisci impedit magni quis beatae! Perferendis culpa reprehenderit illum nemo cum aliquam molestias expedita id dolores.
Totam repellat dicta, iste, quis praesentium, esse quos aliquid commodi ipsam dignissimos magnam perferendis quod doloremque. Expedita odit eveniet voluptatibus, rem, accusamus modi asperiores alias itaque sapiente quas dicta corrupti.
Dignissimos ab voluptate expedita illo, in non voluptatibus iste facilis nihil vero architecto fugiat ut quos quisquam nam praesentium. Facilis iusto sunt fugiat. Perferendis temporibus praesentium nam autem laudantium et.
Deleniti, obcaecati adipisci. Consectetur corrupti corporis debitis quidem iusto eos incidunt, perspiciatis ex enim molestias dolorem, illo placeat, expedita accusantium optio dignissimos maiores similique. At aliquid cum dicta aliquam vel!
Nostrum totam aliquam rem praesentium incidunt omnis rerum velit doloremque eius perspiciatis corrupti nam qui eum ratione temporibus, ad beatae deleniti dolorum consequatur labore ducimus, reprehenderit eligendi. Ea, reprehenderit eaque.
Accusantium similique consectetur at blanditiis maxime dicta qui ad cumque. Eaque minus rerum voluptates rem sed deleniti nostrum consequuntur impedit, earum debitis ea libero nisi aliquid autem delectus, veritatis obcaecati?
Porro suscipit ipsa recusandae iusto in qui asperiores modi id. Maiores voluptatum nisi commodi, tenetur atque iste quam animi sit eum incidunt odit obcaecati alias velit molestiae iusto vero provident.
Placeat molestiae similique officia, iusto hic amet eum eveniet consequuntur recusandae perferendis nesciunt explicabo minus. Deserunt ea a impedit sunt veniam rerum iure tempora sint ullam nihil? Ab, quidem iste.
Odio, ipsam. Beatae ea quo eius, nisi nesciunt voluptatum nam numquam officiis eos iure unde dolores? Dicta ratione similique neque aspernatur! Delectus ex quasi culpa veniam aperiam accusamus maiores dignissimos.
Officiis impedit cupiditate, ea aperiam libero repellat doloribus culpa quia eaque harum distinctio earum ducimus ullam nemo! Voluptates aspernatur deleniti voluptatem tempora, impedit repudiandae, id quis velit doloremque, deserunt perferendis!
Non, aliquam suscipit? Molestiae iusto at blanditiis suscipit, ad dicta quos error numquam ex labore voluptatibus dolorum, facilis dolores corporis expedita sint a similique earum ea placeat magnam beatae? Iusto.
Quo commodi veritatis recusandae corporis ullam, ab ratione natus cupiditate laborum quisquam beatae illum atque maiores perferendis assumenda. Accusantium, veniam. Labore aut corrupti recusandae modi quasi, iste blanditiis. Molestias, dolores.
Debitis possimus quibusdam, enim iste eum explicabo neque aspernatur incidunt esse architecto, perspiciatis molestias repellendus. Reprehenderit veniam a accusantium. Cupiditate autem ab repellendus, ipsam aspernatur eaque sint nisi molestiae consectetur?
Cum quasi, soluta reiciendis, esse ipsam natus qui fuga a quae dolores adipisci velit consequuntur dolore inventore quisquam ut incidunt, ipsum cupiditate. Modi, ipsa libero quas praesentium voluptas tenetur voluptate.
Veritatis, quae autem eligendi voluptatibus, consectetur libero numquam minus aspernatur quis magni ipsum ad vitae incidunt temporibus magnam in optio repudiandae odio laboriosam vel? Dolore incidunt tenetur sapiente nemo. Maiores?
Asperiores unde labore nobis. Ea non harum autem veniam, laboriosam cumque eum cum placeat. Repellendus expedita temporibus voluptas nam adipisci quasi cum ab quae maxime laboriosam. Ab rem magnam blanditiis?
Magnam incidunt totam deleniti omnis commodi voluptatibus officia, repudiandae ipsam debitis voluptatem? Fugit consectetur tempore reiciendis vel numquam, ducimus aliquam esse. Delectus fugit vitae atque doloremque. Molestias ipsum inventore quia.
Odit asperiores quisquam ad debitis ullam minima accusantium amet, consectetur quae, blanditiis provident cupiditate sapiente, nostrum dolorum id quas perferendis cum voluptates esse dolorem? Earum, aspernatur? Vel debitis quidem aspernatur?
Eos aperiam labore id sed pariatur necessitatibus eum! Adipisci magni et magnam iste, repellat minima dolorem debitis nulla aliquid delectus unde asperiores, soluta est praesentium cum repudiandae. Necessitatibus, quas porro.
Quas facilis, sapiente exercitationem temporibus beatae, odit vitae a suscipit modi ipsum distinctio ut inventore! Ullam molestiae aut incidunt aspernatur tempora eligendi rerum ea voluptatibus consequuntur debitis ab, vero nemo.
Ullam voluptatem deserunt quis voluptates harum molestias recusandae animi voluptatibus asperiores accusantium quo aliquid magni ipsa, voluptate similique ipsum, laborum sapiente commodi odio quae quisquam architecto officia nostrum. Minus, sapiente.
Dolorum aut unde magni et eligendi excepturi reprehenderit consequatur nam rerum atque ab, fugit voluptatum quisquam dolor quae sapiente deserunt quaerat sit sed harum exercitationem esse. Incidunt nobis cupiditate unde.
Adipisci maxime ad, alias porro tempore quod, rem voluptate unde natus tenetur laborum fugit nesciunt commodi et. Eos sit nisi numquam ratione atque maiores, accusantium animi omnis enim, sunt provident.
Inventore libero voluptatem reprehenderit repellendus id aliquid sequi itaque ipsa sit voluptates mollitia in tempore facere iste, repudiandae earum iusto commodi. Nemo dolorum accusantium enim ducimus natus incidunt, voluptate saepe?
Optio a quos voluptas vero sint numquam ex quas placeat commodi voluptates id porro magni eligendi quidem, doloribus eum rem? Nostrum doloribus corporis, minima iste neque quod dolore magni illo!
Optio error saepe doloremque, ex maiores inventore ab, aperiam eveniet iure suscipit et voluptatum nam assumenda cumque labore culpa repellendus natus, quae beatae in eaque. Voluptatum impedit commodi id illo.
Asperiores laudantium, maxime veritatis voluptate accusamus sapiente suscipit? Odio totam, omnis eum amet quia dolor! Ab, corrupti! Vitae assumenda ipsa, officiis facilis eveniet nemo quia culpa ratione delectus sapiente qui!
Sed aliquam soluta mollitia, tempora, ullam vero nemo porro culpa incidunt vel doloremque ducimus minima. Alias laudantium quas, excepturi facere minima repudiandae odio sed nostrum. Odit natus inventore tempora suscipit.
Totam nesciunt sequi, aspernatur distinctio voluptatem delectus alias cum consequuntur optio natus hic deleniti, iste, asperiores nulla placeat voluptate in dolores nobis tempore possimus perferendis expedita! Esse incidunt iusto aliquam.
Nisi provident placeat inventore explicabo quas ea cum illo enim ipsam alias ducimus eius aspernatur maiores nemo voluptate numquam recusandae, sed dolor culpa cupiditate aut. Veniam accusamus velit odit omnis!
Optio eos cupiditate velit neque quis reiciendis, ipsam iste commodi mollitia? Ipsa consequuntur laudantium quae repudiandae officiis quis, natus culpa libero perferendis, qui fugit quia iure vel praesentium quo nobis!
Iure optio, odio consequuntur distinctio harum omnis repudiandae facere aspernatur dolorum architecto perferendis aperiam eum magnam quasi voluptate, minima magni nobis eveniet nemo temporibus corrupti qui excepturi molestiae? Sapiente, doloremque.
Perferendis totam dolorem necessitatibus dolore placeat sapiente saepe accusantium? In assumenda commodi voluptatum eius rerum perspiciatis excepturi omnis velit deserunt quasi architecto molestias nihil facere, tempore atque libero earum vitae!
In, animi harum? Illo odit earum minus provident voluptas atque nostrum, repellendus ducimus sed culpa expedita libero quidem odio beatae vitae quos, nam ad quisquam aperiam? Odio itaque cupiditate nulla.
Dolores placeat sequi, ipsum adipisci natus molestias sint, necessitatibus maxime dolorum voluptates earum similique voluptatibus dolore iste minima magnam doloribus expedita optio repellendus vitae impedit dolor! Eum ipsum soluta aliquid.
Minima, perferendis, vitae neque praesentium ullam veritatis illum quam, earum pariatur natus suscipit omnis et itaque in excepturi architecto facilis odit quo doloribus quas laudantium accusantium asperiores! Rerum, unde fuga?
Doloremque quia atque in repudiandae beatae sapiente, id commodi dolore est, incidunt voluptates accusantium culpa amet fuga suscipit eos nostrum minima sint accusamus ipsa! Animi dignissimos temporibus magni soluta voluptatum.
Maiores eligendi officiis molestias laboriosam consequatur vel corrupti minima architecto explicabo? Nemo maxime temporibus deserunt consectetur molestiae, suscipit, ipsam repellat neque fuga similique autem tenetur atque? Distinctio eius perspiciatis aut.
Blanditiis ipsa minima doloremque accusantium laborum. Maxime illum numquam, tempora nihil nam doloremque, quis exercitationem rem aspernatur rerum in dicta ab nobis nesciunt, iusto eius totam ducimus error eveniet distinctio.
Porro quis eaque sunt cumque voluptatem maiores corporis iure excepturi quae nisi, doloribus et veritatis quidem omnis rem corrupti dolor exercitationem in autem dolores aut? Optio sint molestias quisquam dolore?
Facilis, atque maiores. Quod eaque error unde molestias saepe et, vitae aliquid cumque laboriosam ab veritatis obcaecati architecto quam, harum veniam eius mollitia quis illum ipsam accusamus tempore deleniti? Eos!
Voluptatem nihil vitae iure cumque magnam eius id magni ducimus quos eveniet ad molestiae saepe, facilis qui est corporis labore unde accusamus explicabo. Cupiditate minus et dolores distinctio quidem vero!
Fugit nam ullam voluptates ipsa quo aliquam deleniti? Sint distinctio fugit repudiandae facilis nobis ipsa nam, odit nesciunt nostrum illo quos non obcaecati libero nemo minus pariatur similique quibusdam iusto!
Iure inventore repudiandae neque assumenda dolor ad unde eius sunt, expedita veritatis eum sed necessitatibus sint odit quia voluptates dolorem vero commodi eligendi illum eveniet obcaecati deserunt rerum. Ut, voluptatibus.
Culpa aspernatur ipsa, fugiat porro voluptatem minima. Similique, eos tempore. Officiis, rerum! Doloribus minus iure fugiat quae a sed? Officiis, fugit asperiores vero amet architecto minima explicabo earum reiciendis adipisci.
Error vel at officiis suscipit rem quae nam quo voluptatem incidunt natus accusantium consequuntur corrupti adipisci blanditiis aperiam eum, recusandae sapiente porro quaerat distinctio eaque. Laudantium amet nisi et dicta!
Nobis totam placeat quis, iste reprehenderit unde quisquam veritatis magnam fuga quibusdam. Ex accusantium perspiciatis perferendis quaerat neque, id ipsam qui fugit maxime magnam repudiandae voluptates expedita voluptatibus vitae incidunt?
Hic voluptate perspiciatis debitis qui aspernatur rerum dolorem maiores repellat nesciunt? Nihil voluptatibus dolorum excepturi, aut deserunt sunt dolores voluptate, neque praesentium nam hic quae ab minus dolorem eligendi iste!
Nihil accusamus illo omnis, repellendus officia fuga explicabo sunt autem iste nisi voluptatum quo eveniet, minima exercitationem aspernatur earum ratione enim aliquid cupiditate ab natus molestias adipisci vitae unde! Cum?
At facere nulla consectetur repellat perferendis praesentium esse. Fugiat dolorum fuga modi deserunt, neque nulla, vel rem aut tempore ratione tempora quidem sapiente debitis molestias ab nemo delectus culpa autem?
Atque doloremque nihil dolore culpa rem. Eligendi debitis placeat voluptate aut nihil nam doloribus? Eos rerum alias, id sapiente distinctio amet possimus aliquid. Eos, modi numquam consectetur exercitationem sequi sapiente.
Molestias consequatur maiores distinctio. Nam, vero beatae sed incidunt, dolore labore obcaecati reprehenderit natus assumenda pariatur aliquid illo. Nostrum aliquid atque officia eius consequatur ad voluptates laboriosam vero ipsa hic!
Cupiditate cumque repellendus voluptas, eveniet pariatur eaque corporis ducimus qui illum veniam tempore, doloremque id rerum, quam alias fuga. Recusandae ad repellendus totam possimus quasi illum sit nesciunt cum laboriosam.
Nam similique fuga reiciendis! Doloribus laborum ex laboriosam minus magni architecto earum deleniti molestias nulla rem nisi suscipit ratione neque commodi deserunt cum consectetur totam labore, quaerat, corrupti voluptatum doloremque.
Atque nostrum corrupti aliquam, expedita facilis accusantium omnis voluptatibus nobis eligendi libero perferendis a exercitationem odio! Dolorum nisi cumque, error voluptates molestias illum, labore blanditiis, accusantium molestiae doloribus sed odio?
Nam voluptatum cumque, libero a quibusdam dolor dignissimos? Voluptatum eveniet porro qui autem voluptate? Labore alias quas ipsum illo voluptates eaque officiis necessitatibus ipsa distinctio adipisci asperiores, omnis quisquam facere!
Non alias distinctio magnam unde, assumenda perspiciatis perferendis ratione veritatis amet quisquam, expedita cupiditate corporis est sequi cum reiciendis minus fugiat at placeat dolore quibusdam harum consequatur maxime! Ipsam, eligendi?
Consequatur commodi repudiandae beatae aliquid, repellendus odit repellat, labore odio tempore, similique sit et. Repellendus, sit natus vel quo maxime illo nam dolorem incidunt magni repellat! Labore harum eos tempore!
Nam, debitis. Vel nemo corporis eos aliquam deleniti debitis nesciunt, quibusdam inventore vero, quaerat ea blanditiis ipsum accusantium ab fugiat dolor corrupti. Quaerat quae fugit fuga. Veritatis ut dolorem temporibus.
Vitae animi rem dignissimos minus ad quod rerum laboriosam. Quaerat accusantium voluptatem obcaecati ex praesentium iure iste! Excepturi voluptas quidem deserunt tempora debitis minus ducimus sapiente rem quas. Nemo, optio.
Cumque officia, distinctio qui aperiam pariatur eveniet deleniti voluptas nihil illo debitis ab quaerat dolorum, adipisci, vel eum placeat veritatis. Excepturi perferendis non possimus officia reiciendis error facilis aliquam nesciunt!
Illum ipsam nemo quae dolores asperiores recusandae, adipisci culpa necessitatibus nobis vel inventore modi, ad delectus. Corrupti, reprehenderit aliquam, illo illum esse quasi praesentium perspiciatis, aut earum placeat ipsam eaque.
Non, commodi reiciendis inventore rem voluptatem labore voluptates libero cupiditate quae eos quibusdam nobis perspiciatis quas id eum cumque natus explicabo, iste nostrum minima nemo quidem distinctio voluptatum illum! Aperiam.
Similique deleniti eligendi placeat repudiandae odio, blanditiis corporis qui doloribus asperiores beatae accusantium magni omnis debitis impedit rem voluptatibus, quos reprehenderit illo inventore consequatur nihil! Possimus neque pariatur vitae deserunt.
Rem, quaerat totam unde perferendis laboriosam iste cumque non accusamus nobis suscipit a necessitatibus laborum dolorum, doloribus nemo! Eius reiciendis esse labore ea quis optio distinctio, assumenda maiores beatae dignissimos!
Cumque esse perferendis facilis? Laborum optio ad sunt, quo numquam est? Accusamus culpa voluptatem minima non eum, amet dolore quo id unde totam veniam consequatur maxime nostrum saepe corrupti vero.
Unde nisi fugiat totam itaque dolorem nesciunt assumenda adipisci quos quisquam velit quibusdam ut animi est dolores molestias, ea praesentium eveniet placeat? Animi eos at reprehenderit, assumenda similique incidunt explicabo.
Fugit debitis voluptatum tempore hic totam adipisci tenetur laboriosam, assumenda cum! Pariatur debitis cupiditate aliquam necessitatibus in iure expedita mollitia alias sed eius veritatis perferendis repudiandae quidem, optio, vero magni?
Fugiat sit dolore numquam delectus voluptatem qui eveniet natus illo deleniti, soluta laborum expedita accusantium minus cum nesciunt, sunt quidem porro incidunt tempore, quisquam ducimus alias! A harum iusto quia.
Sed voluptas cum sequi? Fugiat perferendis quae totam quibusdam, earum nesciunt distinctio. Soluta odio minus earum est provident animi, quaerat praesentium. Blanditiis, quidem quibusdam! Hic accusamus totam rerum quasi praesentium.
Delectus, eligendi fugit minima dicta at, quia beatae, dignissimos tempore expedita deserunt soluta autem numquam sequi sunt iusto ullam adipisci velit consectetur id quae neque quibusdam quo eum. Nostrum, dolorum.
Enim exercitationem fuga sed id beatae vel facilis, debitis maiores ipsum sint! Cumque rerum ipsum eum tenetur ducimus magnam quo, blanditiis voluptas nesciunt atque similique ea quas sapiente nisi perferendis.
Eum quos quae dolorem, harum quod possimus? Pariatur, doloremque non? Aperiam rerum ad molestias, natus, harum ipsum cumque sit laboriosam reprehenderit, animi maiores doloremque vel nulla culpa. Possimus, minus consequatur!
Dolor quia possimus pariatur est suscipit excepturi harum, tempora expedita quasi, voluptates aliquam impedit eveniet nam quas ipsam ipsa amet quis ipsum. Ratione architecto nam praesentium voluptate similique eos pariatur?
Consequuntur autem debitis exercitationem, voluptate dicta veritatis maiores esse deleniti, sequi natus blanditiis ipsam labore. Perferendis nam dignissimos, exercitationem architecto, asperiores non magnam molestias, in illo impedit sequi temporibus. Quasi.
Modi temporibus placeat accusamus non, dolor quas blanditiis molestiae dignissimos consequuntur officia quaerat dicta eligendi soluta animi, illum tempora dolorum! Totam ducimus id ipsam! Illo qui reprehenderit distinctio fugiat modi?
Quos, sint dolorum reprehenderit omnis suscipit quis veniam eaque et sed debitis consequatur? Dolorem sequi expedita mollitia ipsa, laudantium ratione aut repellendus hic ab non quidem ullam labore deleniti ea?
Quod facere voluptate, consectetur voluptatem corrupti sint odio. Doloremque quis soluta repellat, dolore impedit accusamus, saepe iste numquam quia cupiditate distinctio aut nesciunt aliquid pariatur cumque quod voluptas in earum?
Ea recusandae totam neque. Neque nostrum accusantium, quia non veniam est qui. Quam, laboriosam ratione quaerat exercitationem dolor molestias id aspernatur quia adipisci sequi et qui asperiores perferendis ipsam deserunt!
Similique, obcaecati velit. Sapiente quos voluptates tenetur, consectetur distinctio perferendis, beatae, facilis placeat odit ducimus provident. Omnis neque sunt impedit nihil eveniet. Vitae eum illum aperiam eos, modi soluta excepturi.
Nobis fugiat quisquam omnis consequuntur repellendus alias deserunt voluptate! Nihil voluptatem minima nesciunt numquam hic rerum ipsum officia cumque alias quo? At possimus quae consequuntur cum consectetur quidem, iusto aliquam!
Excepturi rerum quibusdam est autem aut hic recusandae sequi, minus aspernatur mollitia qui natus totam fuga. Minima a, eos amet tempore dolore debitis modi minus numquam quaerat et, labore voluptatem?
Temporibus pariatur sapiente, eligendi voluptatem accusamus nostrum perspiciatis sit? Doloremque fugit repellat, nostrum quod velit nihil dolore culpa labore eius voluptatem cum officia cumque architecto est non ut nemo? Magnam!
Consequuntur libero laboriosam sint iste voluptatum, odio quidem aspernatur voluptate voluptates ducimus autem perspiciatis quis distinctio veniam cupiditate ea, ex fugit repellendus! Vitae vero perspiciatis id ullam fugiat voluptatibus assumenda!
</div>
</body>
</html>
I changed the things mentioned before as well as the text color (to black)
Output:
You can play with the numbers of the contrast and brightness to get a better result.
I hope this helps!
Good luck!
I'm working in a system where I can modify the CSS but not the HTML (can't use javascript either). I'm trying to get the text to wrap around an image placed in the top right of a page. The problem I've been having is that every solution I've found requires that the image be listed before the text in the html. Is there a way around this? Thanks!
<style type="text/css">
#media only screen and (max-width:480px) {
img {
display:block;
float:none;
margin:0 auto 20px !important;
}
}
</style>
<div style="Margin:20px;">
<p style="Margin:0; font:16px/1.25 sans-serif; color:#4CB3E8; text-align:justify;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum.
</p>
<img src="http://i.imgur.com/6bkt2Qk.gif" align="right" width="140" height="140" border="0" style="Margin:0 0 20px 20px; background:#E79851;" />
</div>
There isn't really a way to do what you're describing, but you could definitely create a workaround, something like this:
img{
border-radius: 50%;
margin: 20px;
border: 2px solid black;
position: absolute;
top: 0;
right: 0;
}
div#main::before{
content: "";
float: right;
margin: 90px;
}
<div id="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Fermentum et sollicitudin ac orci phasellus egestas. Vitae congue mauris rhoncus aenean vel elit scelerisque. Sed lectus vestibulum mattis ullamcorper. Gravida dictum fusce ut placerat orci nulla pellentesque dignissim enim. Sed augue lacus viverra vitae congue eu. Tellus orci ac auctor augue mauris. In iaculis nunc sed augue lacus. Quis commodo odio aenean sed. Sollicitudin nibh sit amet commodo nulla facilisi. Metus dictum at tempor commodo ullamcorper a lacus vestibulum sed. Scelerisque eleifend donec pretium vulputate sapien nec sagittis. Lorem ipsum dolor sit amet consectetur. Facilisis volutpat est velit egestas.
Dolor sit amet consectetur adipiscing. Id eu nisl nunc mi. Varius vel pharetra vel turpis nunc eget. Amet dictum sit amet justo donec enim. Diam donec adipiscing tristique risus nec. Integer quis auctor elit sed vulputate mi sit amet. Magna ac placerat vestibulum lectus mauris. Duis ultricies lacus sed turpis tincidunt id aliquet risus feugiat. Ullamcorper a lacus vestibulum sed arcu non odio euismod. Sit amet massa vitae tortor condimentum lacinia quis. Lectus proin nibh nisl condimentum id venenatis a condimentum. Nunc non blandit massa enim nec. Dolor sit amet consectetur adipiscing elit. Diam maecenas sed enim ut sem viverra. Viverra maecenas accumsan lacus vel facilisis volutpat est. Amet nulla facilisi morbi tempus iaculis urna. Mauris ultrices eros in cursus turpis massa tincidunt.
Eu volutpat odio facilisis mauris. Elit sed vulputate mi sit amet mauris. Dignissim convallis aenean et tortor at risus viverra. Lobortis feugiat vivamus at augue eget arcu dictum. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Congue eu consequat ac felis donec. Posuere lorem ipsum dolor sit amet consectetur adipiscing elit duis. Mi proin sed libero enim. Risus pretium quam vulputate dignissim suspendisse in est ante in. Pellentesque habitant morbi tristique senectus et netus et. Amet justo donec enim diam vulputate ut pharetra. Tristique magna sit amet purus gravida quis blandit turpis cursus.
Vel facilisis volutpat est velit egestas dui. Vitae nunc sed velit dignissim sodales ut eu sem integer. Aliquet enim tortor at auctor urna. Eget mauris pharetra et ultrices neque ornare aenean euismod elementum. Vel risus commodo viverra maecenas. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus in. Ut tellus elementum sagittis vitae et. Nunc sed blandit libero volutpat sed cras. Tellus in hac habitasse platea dictumst vestibulum rhoncus. Ornare arcu odio ut sem. Nisi scelerisque eu ultrices vitae auctor eu augue ut. Diam in arcu cursus euismod. Morbi tristique senectus et netus. Senectus et netus et malesuada fames ac turpis egestas. Duis at consectetur lorem donec massa. Tellus at urna condimentum mattis pellentesque id. Sed arcu non odio euismod lacinia.
<img src="https://via.placeholder.com/150">
</div>
Goodmorning,
I'm currently working on a project where I need to have a fixed button at the end of a div and then the ability to scroll the content of that div while still being able to see the button. Here is the code:
<div id="ModalEmail" class="detailModalContainer">
<div class="detailModal">
<div class="modalBoxHeader">
<h4 translate="EMAIL"></h4>
<div data-ng-click="$ctrl.close()">
<span class="icon ti-close"></span>
</div>
</div>
<div class="modalBody">
<div class="step">
<h4 data-translate="CHOOSE_TEMPLATE"></h4>
<div class="template-list">
<div class="template-item" data-ng-repeat="template in $ctrl.emailTemplates" data-ng-class="{ active: template === $ctrl.selectedTemplate }">
<div class="template-info">
<span>{{template.title}}</span>
<span class="ti-check"></span>
</div>
<div class="use-template" data-ng-click="$ctrl.selectTemplate(template)" translate="USE_TEMPLATE"></div>
<img class="template-preview" data-ng-src="data:image/jpeg;base64,{{template.preview}}" />
</div><br /><br /></div>
<span data-translate="CHOOSE_TEMPLATE_ERROR" class="labelPhoto" data-ng-class="{ labelShow: $ctrl.error }"></span><br /><br />
<span data-translate="NO_TEMPLATES_AVAILABLE" class="labelPhoto" data-ng-class="{ labelShow: $ctrl.emailTemplates.length === 0 }"></span><br /><br />
<div >
<button class="btn btn-template customize" type="button" data-ng-click="$ctrl.goToEdit()"><span data-translate="GO_EDIT"></span> <span class="ti-pencil"></span></button>
</div>
</div>
</div>
</div>
Inside of the .step div I print all the contents I need to visualize on my page, the button at the end of the code should actually be fixed. With that I mean that I should be able to scroll the content of div while still be able to see that button. I have tried with positioning without any results. Any recommendations? Thanks for your help in advance
This sounds like a job for flexbox. Here's a quick sample:
.container {
display: flex;
flex-direction: column;
overflow: hidden;
}
.body {
flex: 1 1 auto;
overflow: auto;
}
footer {
flex: 0 0 auto;
}
/* display styles only */
.container {
height: 200px;
width: 500px;
background: lightgray;
}
footer {
padding: 12px;
}
<div class="container">
<div class="body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam finibus libero in tortor venenatis, ac mollis ante posuere. Phasellus quam velit, suscipit at urna et, dictum dictum massa. Integer nec quam vitae tortor pretium varius et ac lacus. Ut luctus a purus in ultricies. Suspendisse vehicula ex vitae libero varius suscipit. Donec a mi at augue vestibulum tempus. Curabitur volutpat, magna in ullamcorper fringilla, neque massa hendrerit orci, eu hendrerit enim neque at nibh.
Pellentesque felis orci, convallis id mattis ac, iaculis eu odio. Nam varius, sem faucibus semper aliquet, dui nisi pretium purus, sed malesuada libero neque a lacus. Cras vulputate ullamcorper justo, et pellentesque ante tincidunt non. Integer pharetra at urna a tempus. Cras et elit dolor. Quisque at bibendum turpis. Suspendisse potenti. Integer in sapien ac nunc volutpat lacinia. In facilisis diam vitae lobortis lacinia. Nam eget aliquam libero. Praesent elementum luctus imperdiet. Suspendisse sit amet dictum ipsum.
Etiam blandit nunc ut tellus lobortis, quis interdum diam mollis. Vivamus auctor justo quis fermentum fermentum. Fusce justo augue, eleifend ut placerat in, cursus a tortor. Nam fringilla, ex non varius ultrices, est nulla interdum dolor, vitae varius purus enim eget lacus. Vivamus vulputate eu purus at molestie. Morbi dictum, nibh eleifend porta ullamcorper, felis quam pharetra eros, in facilisis nibh velit ut mi. Cras faucibus pharetra nunc vitae finibus. Mauris dui dolor, lobortis iaculis leo ac, mollis varius velit. Nulla tincidunt mauris eu magna tristique suscipit. Sed tempor orci magna. Suspendisse est nulla, accumsan nec aliquet auctor, ultrices vel odio. Proin dapibus tortor vel lacus porttitor, ac tincidunt sapien faucibus. Sed neque urna, ornare vitae ultricies ut, rutrum et magna. Fusce pulvinar tellus ultrices nunc vulputate consequat a in arcu. Vivamus iaculis mi vel neque mattis, in malesuada felis mollis. Curabitur nec tempus tellus.
Cras dolor orci, laoreet eu turpis et, convallis aliquam velit. Sed porttitor in ipsum eget sodales. In vestibulum quam nec pulvinar ornare. Nulla ut consectetur tellus. Praesent sollicitudin condimentum tellus, efficitur dictum purus dictum sit amet. Maecenas ultricies libero id viverra varius. Praesent auctor arcu ac mauris posuere molestie. Quisque nisl nisi, aliquet vel venenatis eget, malesuada a lorem. Cras eget magna erat. Nunc quis erat dictum, sagittis enim et, placerat mauris. Curabitur consequat elit non nibh egestas, pulvinar condimentum nulla tristique. In ut auctor risus. Aenean magna felis, imperdiet quis lectus sed, ultrices mollis dui.
Aliquam non bibendum sapien, vitae euismod odio. Praesent consequat lobortis lectus nec dictum. Integer interdum sapien nibh, ac dictum mauris egestas sit amet. Sed pellentesque dolor id maximus pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tellus augue, lacinia in enim vel, eleifend efficitur ante. Curabitur non euismod mauris, ac consectetur metus. Nulla sed odio nunc. Integer placerat gravida scelerisque. Morbi sit amet neque id urna rhoncus faucibus non in libero. Integer diam quam, sodales non vulputate ut, accumsan nec ligula.
</div>
<footer>
Fixed footer
<button>Button</button>
</footer>
</div>
You can use overflow:hidden; overflow-y:scroll; on the div with the content.
<div class="outer">
<div class="inner">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia nemo voluptates exercitationem reprehenderit quo corrupti iste, facilis ipsa, similique, animi ducimus excepturi eaque sunt! Perferendis soluta modi ratione odio excepturi.</p>
<p>Quam, blanditiis. Error, dolore nostrum. Hic, recusandae maxime? Laudantium fuga maxime obcaecati suscipit voluptas quod debitis quaerat reprehenderit maiores, alias fugiat molestias quae aliquam commodi eius quas neque beatae dolorem!</p>
<p>Beatae quis repellendus, accusantium amet expedita nisi blanditiis eum omnis. Facere impedit beatae doloribus obcaecati temporibus a illum eligendi explicabo sed quia quo voluptas, sint nam qui eveniet dolorem laboriosam!</p>
<p>Nostrum eum voluptas culpa accusamus excepturi, suscipit a similique tempora alias fugit ullam consequatur molestiae velit animi doloribus ducimus neque debitis, placeat omnis, quisquam delectus corrupti repellendus. Corporis, nemo minus.</p>
<p>Velit magni voluptate animi error minus illo quisquam atque odit quaerat nam omnis, amet consequatur laboriosam eum assumenda reprehenderit debitis quos nesciunt unde perspiciatis nulla dolor a repellat. Eaque, voluptatibus!</p>
<p>Veritatis, neque delectus. Repudiandae tenetur optio facilis voluptas aliquam nostrum placeat consequatur maiores dignissimos inventore voluptates, eum illo a aperiam dolor quod recusandae doloremque repellendus. Ratione doloribus nostrum distinctio dolores?</p>
<p>Maiores et quae vel eveniet sint maxime totam quo reiciendis! Ea quam labore, asperiores voluptatibus animi reprehenderit quibusdam dolorum cupiditate sunt dicta dolore delectus expedita ducimus? Numquam culpa asperiores voluptatum.</p>
<p>Ipsum, excepturi. Iure nisi cumque dolorem praesentium mollitia impedit aperiam explicabo similique, sit vero, doloribus, reprehenderit iusto qui numquam eum assumenda quod nostrum esse voluptatem facilis. Debitis quidem adipisci omnis.</p>
<p>Delectus, nostrum dignissimos. Amet, ipsa incidunt explicabo vero perferendis autem laudantium et voluptatibus tempore officia debitis tenetur rem eveniet illo odio ipsam magnam impedit esse nostrum quas ipsum accusamus. Voluptatum.</p>
</div>
<div class="btn-wrap"><button class="btn">Click Me</button></div>
</div>
<style>
.outer {
/* ignore this just for presentation*/
max-width: 500px;
}
.inner {
overflow:hidden;
overflow-y:scroll;
height: 250px;
}
</style>
heres a codepen https://codepen.io/NeilWkz/pen/GzpqwB
On your example you add a height, and overflow:hidden; overflow-y: scroll; to the step class.
You can try this I just add <div class="popup">
<div class="popup-content"> and for the button I put the class="dismiss-popup-btn"
.popup {
position: absolute;
display: flex;
top: 0px;
left: 0px;
border: 2px solid #000;
width: 520px;
height: 150px;
background-color: rgba(0, 0, 0, .5);
color: #fff;
}
.popup p {
margin: 0 0 10px 0;
}
.dismiss-popup-btn {
position: absolute;
top: 120px;
right: 370px;
width: 60px;
height: 24px;
font-size: 15px;
line-height: 15px;
text-align: center;
background-color: #ffffe6;
}
.popup-content {
padding-top: 30px;
overflow-y: auto;
padding: 20px;
}
<div class="popup">
<div class="popup-content">
<p>Marty McLane has taught courses at each of our conferences. He is particularly adept at all things Ancestry.</p>
<p>Front-end development relies on organization and solid communication. Whether you're part of a team that builds large-scale sites or you're flying solo with a handful of quality clients, there are many pieces and steps to get a project from start to finish. And that's not just limited to the development phase of a project, either. Think about sales proposals, estimates, sign-offs, and approvals among many other things. There's a lot that goes into even what we might consider a routine … <p>Marty McLane has taught courses at each of our</p> conferences. He is particularly adept at all things Ancestry.</p>
<p>Front-end development relies on organization and solid communication. Whether you're part of a team that builds large-scale sites or you're flying solo with a handful of quality clients, there are many pieces and steps to get a project from start to finish. And that's not just limited to the development phase of a project, either. Think about sales proposals, estimates, sign-offs, and approvals among many other things. There's a lot that goes into even what we might consider a routine … <p>Marty McLane has taught courses at each of our</p> conferences. He is particularly adept at all things Ancestry.</p>
</div>
</div>
<div >
<button class="dismiss-popup-btn" type="button" data-ng-click="$ctrl.goToEdit()">button<span data-translate="GO_EDIT"></span> <span class="ti-pencil"></span></button>
</div>
I'm trying to layer some divs using relative/absolute positioning. The problem I can't seem to fix is the div below the wrapper div.
Check out this jsfiddle to see what I mean.
Notice the position of the div.more-stuff. I would like that div to display underneath div#wrap.
#wrap {
position: relative;
width: 100%;
}
.node-content {
position: absolute;
top: 30%;
left: 5%;
width: 80%;
background: rgba(236, 240, 241, 1.0);
padding: 5%;
}
.bg-img img {
width: 100%;
height: 300px;
background: rgba(192, 57, 43, 1.0);
}
.more-stuff {
}
I just did little bit changes in CSS as you can see in the code below and the fiddle is :
FIDDLE
CSS
body {
background: rgba(46, 204, 113, 1.0)
}
#main-container {
width: 50%;
margin: 0 auto;
}
#wrap {
position: relative;
width: 100%;
}
.node-content {
position: relative;
top: 0%;
left: 5%;
width: 80%;
background: rgba(236, 240, 241, 1.0);
padding: 5%;
}
.bg-img img {
position:absolute;
width: 100%;
}
.more-stuff{
position: relative;
width: 100%;
background: rgba(192, 57, 43, 1.0);
margin: 0 auto;
}
is this what you need something ??
.more-stuff {
position: absolute;
top: 0;
z-index: -1;
}
https://jsfiddle.net/ymdahi/3qypLpsd/embedded/result/
It seems that the problem was trying to use the relative/absolute positioning in concert to float one div above the other. This seems to be the wrong way - the right way I found on Smashing Mag:
Add position: relative; to the div that I want to position over the cover image div did the trick. Check out the final JSFiddle.
Here's the code snippet to run as well:
body { background: rgba(46, 204, 113,1.0) }
#main-container { width: 80%; max-width: 1200px; margin: 0 auto; }
.cover-photo { max-height: 520px; overflow: hidden; }
.cover-photo img { width: 100%; height: auto; background: rgba(192, 57, 43,1.0); }
.content-region {
position: relative; /* add position: relative to floating region, but do not add position: absolute to wrapping div. */
width: 80%;
padding: 25px;
margin: -215px auto 25px;
background: rgba(236, 240, 241,1.0);
}
.left-col { float: left; width: 30%; }
.right-col { float: right; width: 69%; }
.below-content { padding: 50px; background: #000; color: #fff; }
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
<div id="main-container">
<div class="cover-photo">
<img src="http://static.pexels.com/wp-content/uploads/2014/05/iphone-macbook-air-man-156-825x550.jpg">
</div>
<div class="content-region clearfix">
<div class="left-col">
<h1>The title of the page</h1>
<p>Porttitor eros nesciunt, fugiat? Cupidatat, enim eligendi! Tempor commodi risus facilisi conubia? Pulvinar deleniti etiam nostrud cras magni bibendum hendrerit dictumst imperdiet blandit possimus porttitor eiusmod lorem feugiat dolor cillum! Ratione mattis, maecenas! Perspiciatis.</p>
<h2>The title of the page</h2>
<p>Doloremque! Phasellus faucibus! Repellat iure eleifend ullam neque debitis culpa, condimentum et aute voluptatibus odio eiusmod similique tempora facere doloribus itaque. Dictumst neque interdum. Nonummy</p>
</div><!-- left-col -->
<div class="right-col">
<h1>Main content column</h1>
<p>Porttitor eros nesciunt, fugiat? Cupidatat, enim eligendi! Tempor commodi risus facilisi conubia? Pulvinar deleniti etiam nostrud cras magni bibendum hendrerit dictumst imperdiet blandit possimus porttitor eiusmod lorem feugiat dolor cillum! Ratione mattis, maecenas! Perspiciatis. Lacinia erat condimentum proin hymenaeos quisque? Voluptatibus varius, minima, dolorem! Quasi, class? Rhoncus proin porro hymenaeos hymenaeos commodi sociis repudiandae vel unde voluptates similique voluptatum natus, pariatur non pretium nascetur eaque, fames elementum similique rem voluptate, laboriosam corrupti atque doloribus impedit pulvinar neque nibh dictumst ab! Iusto, proin voluptatibus doloremque, molestie cubilia eaque officiis tincidunt hac cubilia explicabo architecto dignissim officiis, sapien, maiores tristique. Nesciunt, arcu.</p>
<p>Porttitor eros nesciunt, fugiat? Cupidatat, enim eligendi! Tempor commodi risus facilisi conubia? Pulvinar deleniti etiam nostrud cras magni bibendum hendrerit dictumst imperdiet blandit possimus porttitor eiusmod lorem feugiat dolor cillum! Ratione mattis, maecenas! Perspiciatis. Lacinia erat condimentum proin hymenaeos quisque? Voluptatibus varius, minima, dolorem! Quasi, class? Rhoncus proin porro hymenaeos hymenaeos commodi sociis repudiandae vel unde voluptates similique voluptatum natus, pariatur non pretium nascetur eaque, fames elementum similique rem voluptate, laboriosam corrupti atque doloribus impedit pulvinar neque nibh dictumst ab! Iusto, proin voluptatibus doloremque, molestie cubilia eaque officiis tincidunt hac cubilia explicabo architecto dignissim officiis, sapien, maiores tristique. Nesciunt, arcu.</p>
<p>Porttitor eros nesciunt, fugiat? Cupidatat, enim eligendi! Tempor commodi risus facilisi conubia? Pulvinar deleniti etiam nostrud cras magni bibendum hendrerit dictumst imperdiet blandit possimus porttitor eiusmod lorem feugiat dolor cillum! Ratione mattis, maecenas! Perspiciatis. Lacinia erat condimentum proin hymenaeos quisque? Voluptatibus varius, minima, dolorem! Quasi, class? Rhoncus proin porro hymenaeos hymenaeos commodi sociis repudiandae vel unde voluptates similique voluptatum natus, pariatur non pretium nascetur eaque, fames elementum similique rem voluptate, laboriosam corrupti atque doloribus impedit pulvinar neque nibh dictumst ab! Iusto, proin voluptatibus doloremque, molestie cubilia eaque officiis tincidunt hac cubilia explicabo architecto dignissim officiis, sapien, maiores tristique. Nesciunt, arcu.</p>
<p>Porttitor eros nesciunt, fugiat? Cupidatat, enim eligendi! Tempor commodi risus facilisi conubia? Pulvinar deleniti etiam nostrud cras magni bibendum hendrerit dictumst imperdiet blandit possimus porttitor eiusmod lorem feugiat dolor cillum! Ratione mattis, maecenas! Perspiciatis. Lacinia erat condimentum proin hymenaeos quisque? Voluptatibus varius, minima, dolorem! Quasi, class? Rhoncus proin porro hymenaeos hymenaeos commodi sociis repudiandae vel unde voluptates similique voluptatum natus, pariatur non pretium nascetur eaque, fames elementum similique rem voluptate, laboriosam corrupti atque doloribus impedit pulvinar neque nibh dictumst ab! Iusto, proin voluptatibus doloremque, molestie cubilia eaque officiis tincidunt hac cubilia explicabo architecto dignissim officiis, sapien, maiores tristique. Nesciunt, arcu.</p>
</div><!-- right-col -->
</div> <!-- content-region -->
<div class="below-content">
<h1>Other things below content</h1>
<p>Porttitor eros nesciunt, fugiat? Cupidatat, enim eligendi! Tempor commodi risus facilisi conubia? Pulvinar deleniti etiam nostrud cras magni bibendum hendrerit dictumst imperdiet blandit possimus porttitor eiusmod lorem feugiat dolor cillum! Ratione mattis, maecenas! Perspiciatis. Lacinia erat condimentum proin hymenaeos quisque? Voluptatibus varius, minima, dolorem! Quasi, class? Rhoncus proin porro hymenaeos hymenaeos commodi sociis repudiandae vel unde voluptates similique voluptatum natus, pariatur non pretium nascetur eaque, fames elementum similique rem voluptate, laboriosam corrupti atque doloribus impedit pulvinar neque nibh dictumst ab! Iusto, proin voluptatibus doloremque, molestie cubilia eaque officiis tincidunt hac cubilia explicabo architecto dignissim officiis, sapien, maiores tristique. Nesciunt, arcu.</p>
</div><!-- below-content -->
</div><!-- #main-container -->