I have this <div> with a radial-gradient on it, however I don't want it to be over all the <div> but rather I'd like it to go some amount down and then repeat.
So to be clear I don't want the gradient to stretch over the div like this
But rather repeat across the div at a certain height like this
You need to add a selector, class or id to your div.
.container{
height: 500px;
background: red;
background: radial-gradient(red, yellow);
width: 100%px;
}
.content{
position:absolute;
top: 20%;
left: 35%;
width: 300px;
height: 150px;
background:
}
<div class="container">
<div class="content">
</div>
</div>
Please Ignore the positions, and etc...
Only focus in the class container and content. That the css of gradient background only affect the div that has the class.
Check this: JSFiddle
Related
Is it possible with only CSS to have the following effect:
I have two divs. One follows the other.
Now, if the user starts scrolling down the page (to see other content, more divs if you want..) the second div should "go up" (could also stay fixed and the first div goes down, I mean it would look the same) and overlap the first.
But only overlap for let's say 50px. After that, the behaviour is normal again, meaning that if you scroll further, those divs move out of the browser window eventually.
Have I made myself clear? I can add two coloured boxed to showcase if that helps. I played around a bit and tried parallex/position fixed/sticky mixes, but none seem to work with a given height restriction. I just wonder if this is possible without javascript.
You can get this effect by using position: sticky on both elements. There are a few things that can stop this from taking place, like having overflow: hidden or not having a height set on the parent element.
HTML
<div class="container">
<div class="red-box">This is the red box</div>
<div class="blue-box">this is the blue box</div>
</div>
<!-- needs space to be able to actually scroll on the page -->
<div class="container">
<div class=""></div>
<div class=""></div>
</div>
CSS
/* set the height of the container so that the sticky elements know how far they are meant to scroll */
.container{
min-height: 400px;
}
/* set your position sticky and a attribute that tells it when it should become sticky, in this case right at the top */
.red-box{
height: 400px;
background-color: red;
position: sticky;
top: 0px;
}
.blue-box{
height: 400px;
background-color: blue;
position: sticky;
top: 0px;
}
I have done a quick codepen example so that you can see this working. hope that helps.
https://codepen.io/Domnewmarch/pen/NWzqBde
Solution: I used a combination of negative margin, z-index and position: sticky.
Added margin to the 2nd container to make it more visible.
.sticky-wrapper {
height: 310px;
margin-bottom: -60px;
}
.content {
z-index: -1;
position: sticky;
top: 0;
padding: 0 3%;
height: 250px;
background-color: green;
}
.foo {
margin: 0 50px;
background-color: red;
height: 200px;
}
.next-content {
height: 1000px;
background-color: khaki;
}
<div class="sticky-wrapper">
<div class="content"></div>
</div>
<div class="foo"></div>
<div class="next-content"></div>
How could we use CSS mix-blend-mode, if the background image/video is not the parent of the element which gets the mix-blend-mode?
For example
<div class="has-video-background">
<video></video>
</div>
<div class="caption-above-video">
<h1>This div should have a colored background with a mix-blend mode multiply</h1>
</div>
The div with the class .caption-above-video should have a colored background with a mix-blend-mode. But the effect not appears. When using mix-blend-modes somewhere, the element with the blend-mode is the direct child of the parent with the background image, but in this example this is not possible because of a full with and height background video. Also I cannot manipulate the DOM output, because its coming from a page builder.
How could we use CSS mix-blend-mode effects when the containers are siblings?
Mix-blend-mode does not work with siblings.
The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#effect_of_different_mix-blend-mode_values
I actually can't see what the problem is.
If you overlay the video with another element (by giving that element position absolute and the same size as the video for example - but there are lots of ways of doing this) and they are siblings (i.e have the same parent) then the mix-blend-mode seems to work perfectly well.
.parent {
width: 80vmin;
position: relative;
}
video {
position: relative;
width: 100%;
}
.caption-above-video {
background: red;
mix-blend-mode: multiply;
position: absolute;
pointer-events: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="parent">
<div class="has-video-background">
<video src="https://www.w3schools.com/HTML/movie.mp4" controls autoplay></video>
</div>
<div class="caption-above-video">
<h1>This div should have a colored background with a mix-blend mode multiply</h1>
</div>
The only thing I did 'extra' was to make the overlaying element have pointer events of none so that I could use the controls on the video. If you need pointer events on the overlay then you'll need to implement the video controls yourself e.g. with JS.
As far as I know, it comes down to which div is on top. So by using position: absolute; and a z-index for example, you add mix-blend-mode to the div that is "on top" of the other div.
I added a code snipped so you can see what I've done to accomplish this.
-I did add a container around the two divs for styling purposes for this example.
-Added an extra div in the .caption-above-video that has the background-color and mix-blend-mode. This is important if you don't want the h1 to be affected by the mix-blend-mode, because that affects all children too.
Also added an background-image to the .has-video-background so you can see the result better. This is for demonstration purposes only and as soon as you add the actual video, the result will be the same.
.container{
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 400px;
height: 300px;
}
.has-video-background{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-image: url('https://cdn.pixabay.com/photo/2022/08/09/16/19/sea-7375377_960_720.jpg');
background-size: cover;
background-repeat: no-repeat;
background-color: lightblue;
}
.caption-above-video{
position: absolute;
width: 200px;
height: 150px;
}
h1{
position: relative;
z-index: 2;
color: white;
}
.background-div{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
mix-blend-mode: multiply;
background-color: green;
}
<div class="container">
<div class="has-video-background">
<video></video>
</div>
<div class="caption-above-video">
<h1>Caption</h1>
<div class="background-div"></div>
</div>
</div>
I am trying to accomplish an effect where it looks like the "container" div is inverting the background image of the "parent" div. From my research I can't seem to find a way other than the "parent" and the "container" being the same size with different backgrounds, and the "content" div masking the "container" div. Here is an image of what I would like it to look like.
Here is my HTML:
<div class="parent">
<div class="container">
<div class="content">
</div>
</div>
</div>
The "parent" div has a normal background, while the "container" div (same size as "parent") has an inverted version of the "parent" background (inverted via thrid party program, I am not trying to invert it via css).
My question is, what CSS do I need to apply to the "content" and "container" div to achieve a mask where the "container" div's background is only shown through the "content" div?
An idea is to play with background-clip and adjust padding to control how much background you will show from the inner container:
.container {
height: 300px;
background: url(https://picsum.photos/1000/800?image=1069) center/cover;
}
.content {
height: 100%;
background: url(https://picsum.photos/g/1000/800?image=1069) center/cover;
background-clip: content-box;
padding: 100px calc(100% - 300px) 100px 50px;
box-sizing: border-box;
}
<div class="container">
<div class="content">
Some text
</div>
</div>
This can also be done with one container and multiple backgrounds:
.container {
height:300px;
background:
url(https://picsum.photos/g/1000/800?image=1069) center/cover,
url(https://picsum.photos/1000/800?image=1069) center/cover;
background-clip:
content-box,
padding-box;
padding:100px calc(100% - 300px) 100px 50px;
box-sizing:border-box;
}
<div class="container">
Some text
</div>
You could use mix-blend-mode though it will affect any contents of the .content div.
.container {
height: 300px;
background: url(https://picsum.photos/1000/800?image2045) center/cover;
padding: 50px;
}
.content {
width: 220px;
height: 180px;
background: white;
mix-blend-mode: difference;
box-sizing: border-box;
}
<div class="container">
<div class="content"></div>
</div>
I have to create a page with this structure:
Where the RED part has width = 100% and BLUE (and GREEN) part has width 885px.
I thought to create different width, some with width = 885px and the others with width 980px... but I think this is not the right approach... in fact if I have to change the width for example from 885px to 980 px
Another solution I think could be to have to div... the first one has width 100%; the second one, inside the first one, has width 885px. But I think could be difficult to place the green div at the same height/top of the red one on the back.
Which approach would you used to reach the goal?
Thank you
You need to manage simple html like below:
<div class="wrapper">
<div class="wrap"></div>
</div>
.wrapper{
width: 100%;
}
.wrap{
width: 885px;
margin: 0 auto;
}
When you only need full width div don't include .wrap in your html. And when you only need 885px width div exclude .wrapper in your html.
I made a quick example of how you could do this right here. I just made two classes, one that has a width of 100% (red div), and one that has a fixed width (blue div, I used 450px in my example). The green div is just a blue div inside a red div. I hope my example answers all the questions you have. Good luck!
I guess you can manage the red with green band and sencond red band positioning absolutely in a main container, that also contains the blue one with a width. To explain it better i've created a JsFiddle please follow the link to see it working:
Working example
I've use the approach suggested #C-link Nepal, but I think to put red bars this isn't enough.
HTML:
<div class="top"></div>
<div class="main">
<div class="redgreen">
<div class="green"></div>
</div>
<div class="red"></div>
<div class="blue"></div>
</div>
<div class="foot">
</div>
CSS:
.top {
background-color: red;
height: 50px;
}
.main {
text-align: center;
position: relative;
}
.green, .blue {
width: 600px;
margin: 0 auto;
}
.redgreen {
width: 100%;
background-color: red;
position: absolute;
top: 30px;
}
.red {
height: 30px;
position: absolute;
top: 150px;
background-color: red;
width: 100%;
}
.green {
background-color: green;
height: 100px;
}
Please note that most of CSS classes have height and background color to the pattern be drawn...
I have a hard time to get background on both side of my page:
Style
.left {
background: url(wax.png);
width: 15%;
position: absolute;
left: 0px;
height: 100%;
}
.right {
background: url(wax.png);
width: 15%;
position: absolute;
right: 0px;
height: 100%;
}
.middle{
margin: 0 auto;
}
HTML
<div class="left">
</div>
<div class="middle">
</div>
<div class="right">
</div>
Result
Its close to what I am trying to achieve but the right image is misplaced.
Also the backgrund is not repeated vertically
background: url(wax.png) repeat-y 0 0;
To get the vert repeat.
Do you have something positioned relative? That input text field is probably pushing down the right div unless you have something else positioned relative?
If you're going to use position:absolute, wrap it all and use position:relative on that wrapping div.
Otherwise, you could use the body tag or even the html tag but it's probably better to use a wrapping container.
im not really sure what you are trying to do it looks align to me but for repeating image is this background: url(wax.png); background-repeat: no-repeat
Its close to what I am trying to achieve but the right image is
misplaced.
Add top:0 to the .right class
Also the backgrund is not repeated vertically
As others have mentioned add repeat-y in the background property value
background: url(wax.png) repeat-y
Maybe you just want to place your middle inside one div with the background repeated in both direction and middle having background white
html:
<div id="background">
<div id="content">
this was middle
</div>
</div>
css:
#content{
margin: 15%;
background: white;
}
#background {
background: url(wax.png);
}