Is it possible to have multiple mix-blend-modes to create different div background layers?
Currently, the body has a fixed background image. There is a div (main container) which uses mix-blend-mode:soft-light and the background-color:white which creates a layer above the body image.
I am adding a div inside of the main container, which will use the same, mix-blend-mode:soft-light in order to create a new layer on top. Instead, it is displaying the same colour as the main container, instead of a further overlaid colour.
HTML
<body>
<div class="container">
<div id="headerBackground"></div>
</div>
</body>
CSS
body {
background-color: #21224f;
background-image:url('https://i.ibb.co/chww3Zd/bg.jpg');
width:100vw;
height:100vh;
background-repeat:no-repeat;
background-size:cover;
margin:0;
max-height:100vh;
overflow:hidden;
}
/* inner section - background */
.container{
max-width:1280px;
width:100vw;
background-color:#fff;
mix-blend-mode:soft-light;
height:100vh;
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
border-radius:20px;
}
#headerBackground{
height: 140px;
background-color: #fff;
width: 1280px;
mix-blend-mode: soft-light;
border-radius:20px;
}
JS Fiddle -> https://jsfiddle.net/9cjgtwbp/4/
Here is a link to the desired effect -> https://i.ibb.co/nwZP9sG/000-wireframe-dark.jpg
Here is how it currently looks -> https://i.ibb.co/SKX3xSH/Screenshot-2022-04-11-at-14-49-24.png
Any help or guidance would be greatly appreciated!
Related
I have a simple HTML form with a submit button within. The body has a background image:
I want to show another div with the image inherited from body like this:
The second div has absolute position and as you see, an inherited background image (or transparent color) from body:
How can I manage to this?
Thanks
use background-attachment:fixed and apply the same background to the arrow and the body:
.box {
width:40%;
height:100vh;
margin-left:auto;
border:2px solid;
box-sizing:border-box;
background:#fff;
}
body {
margin:0;
background:url(https://picsum.photos/id/1016/800/800) center/cover fixed;
}
.arrow {
position:absolute;
height:50vh;
right:30%;
top:calc(50% - 25vh);
border-radius:17%;
background:url(https://picsum.photos/id/1016/800/800) center/cover fixed;
}
<div class="box">
</div>
<img src="https://i.stack.imgur.com/Yr00Q.png" class="arrow">
I have an image that isn't as big as all screen sizes, yet I want it to be displayed on screens with whatever width by adding a repeated pattern on either side. I can of course make the image a lot wider but that would cause the page to load a lot slower as well.
It's a bit hard to explain by text so here are some images and the JSFiddle Demo.
#layer_top {
background:url("http://puu.sh/cajm0/c0c2cc9475.jpg") repeat;
width:100%;
height:136px;
}
#layer_transition {
width:100%;
height:36px;
margin-top:-36px;
background-image:url("http://puu.sh/cajG0/2768274649.png");
background-repeat:no-repeat;
background-position:center;
}
#layer_bottom {
width:100%;
height:100px;
background:url("http://puu.sh/cajmN/9b1e9ef79f.jpg") repeat;
}
<div id="layer_top"></div>
<div id="layer_transition"></div>
<div id="layer_bottom"></div>
Result:
Wanted Result:
You could achieve that by adding a pseudo-element to the top layer which is formed as ellipse and it's positioned with the respect of the layer.
Then simply apply the same background image to both, layer and the pseudo-element:
Example Here
#layer_top, #layer_top:after {
background:url("http://puu.sh/cajm0/c0c2cc9475.jpg") repeat;
}
#layer_top { width:100%; height:136px; position: relative; }
#layer_top:after {
content: "";
position: absolute;
z-index: -1;
width: 500px; height: 100%;
left: 0; right: 0; top: 20%;
margin: auto;
border-radius: 50%;
}
You could also use clip to cut the extra part of the oval shape.
A bit of a different solution but it might just work:
Why don't you replace the mask image? So instead of overlaying this gray thing, make an overlay for the purprle one. If you position that centered against the top of the grey area, you've got the same result/
Well, the problem is with the div elements you created its hard to get it work.
An easy solution is to use for the bottom part 3 diffrent divs.
<div id="side_layer"></div>
<div id="layer_bottom"></div>
<div id="side_layer"></div>
I created a simple jsfiddle for you: jsfiddle
It does work responsive until 500px width.
You could simply add a media query and hide the right and left layer then.
You can do this it is easy.
Add CSS class to body or create parent div above body and style it.
Working Fiddle
http://jsfiddle.net/7n06und5/11/
.parent {
margin:0;
background:url("http://puu.sh/cajm0/c0c2cc9475.jpg") repeat;
width:100%;
}
#layer_top {
background:url("http://puu.sh/cajm0/c0c2cc9475.jpg") repeat;
width:100%;
height:136px;
}
#layer_transition {
width:100%;
height:36px;
margin-top:-36px;
background-image:url("http://puu.sh/cajG0/2768274649.png");
background-repeat:no-repeat;
background-position:center;
}
#layer_bottom {
width:100%;
height:300px;
background:url("http://puu.sh/cajmN/9b1e9ef79f.jpg") repeat;
width:500px;
margin:0 auto;
}
HTML
<body class="parent">
<div id="layer_top">
</div>
<div id="layer_transition">
</div>
<div id="layer_bottom">
</div>
</body>
Hope it helps you!
you can try this with css border-raidus
HTML
<div id="header">
<div id="inner"></div>
</div>
CSS
#header{
background:url(http://puu.sh/cajm0/c0c2cc9475.jpg) repeat-x;
//height:75px;
//width:100%;
padding:3% 15%;
}
#inner{
background:url(http://puu.sh/cajm0/c0c2cc9475.jpg) repeat-x;
height:75px;
width:100%;
border-radius:0 0 50% 50%;
}
Fiddle Demo
I'm trying to add an image to the bottom of a responsive slider and need help sticking it to the bottom.
When in full screen mode it works fine, but as I shrink the page it keeps floating up, higher and higher.
I know I can set media queries to fix the issue on certain breakpoints, but I'm looking for a more adaptive solution that will work without having to use media queries.
Here is an image of what the slider looks like at full width. (This is fine.)
Then as I start to scale the screen you can notice the grass image moving up.
This is my problem. I need that grass to stay glued to the bottom of the slider.
I don't want to post all the slider code so I made a simple version on JSFiddle.
Here is the code.
HTML:
<div class="pic" align="center"><img src="http://i.imgur.com/8uVGUkM.jpg" class="slider"/></div>
<div class="grassframe"><img src="http://i.imgur.com/vw8soIm.png" class="img-max"/></div>
CSS:
.slider{width:100%; max-width:960px; height:auto; position:relative; z-index:1;}
.grassframe {
position:relative;
max-width:1200px;
margin:-135px auto;
z-index:2;
}
.img-max { width:100%; height:auto; }
I created a JSFiddle if someone wouldn't mind taking a look.
You can use absolute position and margin-top with % value. DEMO
Vertical padding or margin using % value use the parent's width as reference. So once tuned it will worke with any width.
.slider {
width:100%;
max-width:960px;
height:auto;
position:relative;
z-index:1;
border:solid;
}
.grassframe {
position:absolute;
margin-top:-12.5%;
max-width:1200px;
left:0;
right:0;
z-index:2;
}
.img-max {
width:100%;
height:auto;
}
If you use a wrapper in relative position and set to same max-width, it even works better (grass in absolute or relative position doesn't matter much here as long as z-index is avalaible ): DEMO
.slider {
width:100%;
max-width:960px;
height:auto;
position:relative;
z-index:1;
border:solid;
}
.grassframe {
position:relative;
margin-top:-12%;
max-width:1200px;
left:0;
right:0;
z-index:2;
}
.img-max {
width:100%;
height:auto;
}
.container {
position:relative;
margin:auto;
max-width:1200px;
}
Try out the below code:
HTML
<div class="pic" align="center">
<img src="http://i.imgur.com/8uVGUkM.jpg" class="slider" />
<div class="grassframe"></div>
</div>
CSS
.pic {
position: relative;
}
.slider {
max-width:100%;
}
.grassframe {
background: url("http://i.imgur.com/vw8soIm.png") no-repeat scroll center top / 1920px auto rgba(0, 0, 0, 0);
bottom: -87px;
height: 310px;
position: absolute;
width: 100%;
}
Have a look at the JSFiddle
If I hover over a image, then display another image on that same image.
Above image of plane is original image and swapped text is cross transparent image.
If I hover on image of plane then I want to show another image of swapped
The best way to achieve what you are trying to do is to use use jQuery. Please see below:
$("#ImageID").mouseover(function(){
$("#ImageID").attr("src","new/url/goes/here.jpg");
});
$("#ImageID").mouseout(function(){
$("#ImageID").attr("src","old/url/goes/here.jpg");
});
I hope this helps!
try this code:
<style type="text/css">
.izo {
background: url(http://img1.jpg) no-repeat 50% 50%;
display: block;
width: 400px;
height: 400px;
}
.izo:hover {
background: url(http://img2.jpg) no-repeat 50% 50%;
} </style>
Try using this, it allow you to show overlay image without changing original image
<div class="pic-container">
<div class="pic-box"><img src="img_original.jpg"></div>
<div class="pic-box pic-hover"><img src="img_original.jpg"></div>
</div>
& style
<style>
.pic-container{display:block; width:200px; height:200px; position:relative;}
.pic-container .pic-box{display:block; width:200px; height:200px;}
.pic-container .pic-box img{display:block; width:200px; height:200px;}
.pic-container .pic-hover{position:absolute; top:0; left:0; display:none;}
.pic-container:hover .pic-hover{display:block;}
</style>
I want to built a simple landing page with a header,footer and an image - exactly between the header and the footer (horizontally/vertically centered).
The space between the header/footer and the image should be the same and should depend from the height of the browser-window.
The image has a fixed width (900px) and a fixed hight (600px).
Aw: it is a sticky footer
I have tried something like this:
{display:block; padding:0 40px; width:900px; margin:0 auto; vertical-align:middle;}
my html:
<div class="fbg">
<div class="fbg_resize">
<img src="images/image.png" width="900" alt="" />
</div>
<!--<div class="clr"></div>-->
to get it horizontally centered:
.fbg_resize { margin:0 auto; padding:0 40px; width:900px;}
here is the code that matters:
http://jsfiddle.net/SFWBL/
Have a look at this fiddle for the basic premise, it should be enough to get you started.
HTML
<div id='header'></div>
<div id='image'></div>
<div id='footer'></div>
CSS
html, body{
text-align:center;
height:100%;
width:100%;
margin:0;
padding:0;
}
#header, #footer{
height:50px;
width:100%;
}
#image{
height:50px;
width:50px;
margin:-25px auto 0 -25px;
background:grey;
position:absolute;
top:50%;
left:50%;
}
#header{
background:blue;
}
#footer{
position:absolute;
bottom:0px;
background:red;
}
Instead of using an img, you can try background-image for the div
html, body {
height: 100%;
}
.fbg {
background-image: url(http://lorempixel.com/900/600);
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
See modified JSFiddle
Relative (percentage) positions are the way to get your elements to recognize the size of the browser window. Since they work on the edges (top, left), you have to use a negative margin to move the item back up half the height of your item. Since you know the fixed height of your image is 600px, you need -300px. You want to give your image:
position: absolute;
top: 50%:
margin-top: -300px;