This question already has answers here:
How to overlay images
(11 answers)
Closed 2 years ago.
I'm trying to create an opaque div with a slight colour over an image.
I can't seem to get it to fit exactly over the whole image. I've tried so many different variations and the following is the best I can come up with.
I know it's probably something simple but I think I need some help lol.
.old{
position: relative;
}
.cover{
background-color: blue;
width: 100%;
height: 200vh;
position: absolute;
top: 0;
left: 0;
z-index: 1;
opacity: 0.5;
}
<div class ="cover">
</div>
<img class="old" src="https://www.technogies.com/wp-content/uploads/2018/10/Elderly-At-Using-Technology.jpg" style="width:100%">
You don't need to use img use just background color .
https://jsfiddle.net/hu3wfc76/
<div class ="cover">
<div >
</div>
</div>
.cover{
background-color: blue;
background:url(https://www.technogies.com/wp-content/uploads/2018/10/Elderly-At-Using-Technology.jpg) no-repeat;
background-size:cover;
width: 100%;
height: 200vh;
position: absolute;
top: 0;
left: 0;
z-index: 1;
opacity: 0.5;
--filter:blur(10px);
}
.cover div{
background:blue;
width:100%;
opacity:0.5;
height:100%;
}
You should wrap cover div and image with another div and set its position to be relative. Then you should set the height and the width of the image to 100% to fulfill the wrapper div and also you should set the cover div position to be absolute and expand it all over the wrapper div.
If you want to set custom height and width to the image, you should set those properties to wrapper div.
.old{
height: 100%;
width: 100%;
}
.cover{
background-color: blue;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
opacity: 0.5;
}
.wrapper {
position: relative;
}
<div class='wrapper'>
<div class ="cover">
</div>
<img class="old" src="https://www.technogies.com/wp-content/uploads/2018/10/Elderly-At-Using-Technology.jpg">
</div>
I think this is what you want, basically I added a container for both the image and the div and forced the div position to be relative to container <div>
body {
margin: 0;
}
.container {
position: relative;
}
.cover {
background-color: blue;
width: 100%;
height: 99%;
position: absolute;
top: 0;
left: 0;
opacity: 0.5;
}
<div class="container">
<div class ="cover">
</div>
<img class="old" src="https://www.technogies.com/wp-content/uploads/2018/10/Elderly-At-Using-Technology.jpg" style="width:100%">
</div>
You can use pseudo elements with a background as an alternative to another element if you don't need an alt text on that image.
<div class="cover"></div>
.cover {
background-color: rgba(0, 0, 255, 0.5);
width: 100%;
height: 200vh;
position: relative;
}
.cover::after {
content: ' ';
background-image: url('https://www.technogies.com/wp-content/uploads/2018/10/Elderly-At-Using-Technology.jpg');
background-size: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
https://codepen.io/koralarts/pen/RwPBWVd
Just a simple way to give overlay a whole image. wrap the image within a div and do with CSS pseudo selector. just like below
.cover{
position:relative;
width: 100%;
height: 100%;
}
.cover::before{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background: rgba(0,0,255,0.5);
content:'';
z-index:2
}
<div class ="cover">
<img class="old" src="https://www.technogies.com/wp-content/uploads/2018/10/Elderly-At-Using-Technology.jpg" style="width:100%">
</div>
Related
I have tried this a lot of different ways, and cannot make it so that the .pink and .green divs blend with one another, but not the background color of the parent element, .wrapper.
.wrapper {
background-color: blue;
height: 100vh;
width: 100%;
isolation: isolate;
}
.pink {
background: hotpink;
height: 80%;
width: 50%;
position: absolute;
z-index: 1;
top: 0;
left: 10%;
mix-blend-mode: multiply;
}
.green {
background: limegreen;
height: 80%;
width: 50%;
position: absolute;
z-index: 1;
top: 0;
right: 10%;
mix-blend-mode: multiply;
}
<div class="wrapper">
<div class="pink"></div>
<div class="green"></div>
</div>
Or, see the fiddle: https://jsfiddle.net/grettynebraska/9dr6vspy/5/#&togetherjs=breFHFSfEd
My goal is simply to have a pink and green div that blend with eachother, and live atop a black background, with whom they do not blend.
I tried using absolute position, and sitting the pink/green divs and the wrapper next to one another, as siblings. However, all elements still blended.
I would consdier an extra wrapper where you set a z-index in order to create a staking context thus the element will no more blend with the blue element:
.wrapper {
background-color: blue;
height: 100vh;
width: 100%;
}
.wrapper > div {
position:absolute;
height: 100vh;
left:0;
right:0;
z-index:0;
top:0;
}
.pink {
background: hotpink;
height: 80%;
width: 50%;
position: absolute;
z-index: 1;
top: 0;
left: 10%;
mix-blend-mode: multiply;
}
.green {
background: limegreen;
height: 80%;
width: 50%;
position: absolute;
z-index: 1;
top: 0;
right: 10%;
mix-blend-mode: multiply;
}
<div class="wrapper">
<div>
<div class="pink"></div>
<div class="green"></div>
</div>
</div>
Everything in CSS that creates a stacking context must be considered an ‘isolated’ group. HTML elements themselves should not create groups.
An element that has blending applied, must blend with all the underlying content of the stacking context [CSS21] that that element belongs to. ref
So the main trick is to have the elements in a stacking context where the blue element doesn't belong. If the wrapper element is their direct parent element it won't be trivial to make them in different stacking context thus the need of an extra wrapper.
Isolation won't help you, because it will simply make the wrapper creating a stacking context, so it won't isolate the wrapper from its child but from all the elements outside. if you apply it to the extra wrapper it will work exactly like setting z-index or any other property that create a stacking context.
.wrapper {
background-color: blue;
height: 100vh;
width: 100%;
}
.wrapper > div {
position:absolute;
height: 100vh;
left:0;
right:0;
isolation:isolate;
top:0;
}
.pink {
background: hotpink;
height: 80%;
width: 50%;
position: absolute;
z-index: 1;
top: 0;
left: 10%;
mix-blend-mode: multiply;
}
.green {
background: limegreen;
height: 80%;
width: 50%;
position: absolute;
z-index: 1;
top: 0;
right: 10%;
mix-blend-mode: multiply;
}
<div class="wrapper">
<div>
<div class="pink"></div>
<div class="green"></div>
</div>
</div>
A similar question has been asked many times (how to place text over an image) but every solution says make a relative positioned container and place image and text inside.
But what if the container needs to be absolute??
I want the image to be absolute in order to span the full width of the page, without being limited by the wrapper's width: Wrapper has set width, the image container should ignore this and be full screen, and the text should float above the image.
Here is a fiddle in which the image isn't ignoring the wrapper's width
.splash_image {
position: relative;
left: 0;
top: 2%;
height: 600px;
overflow: hidden;
z-index: 1;
}
.splash_image img {
width: 100%;
position: absolute;
}
.splash_title {
color: red;
position: absolute;
}
.wrapper {
width: 50%;
}
<div class="wrapper">
<div class="splash_image">
<img src="http://fc07.deviantart.net/fs34/f/2008/290/6/4/Large_Tree_Stock_by_HauntingVisionsStock.jpg" alt="test image">
<div class="splash_title">Test title to go here on image</div>
</div>
</div>
You set relative positioning on the image container, so even though you've positioned the image absolutely, it's being positioned absolutely within a relative positioned container. The container should be positioned absolutely if I am understanding what you're looking for:
.splash_image{
position:absolute;
left:0;
top:2%;
height:600px;
width:100%;
overflow: hidden;
z-index: 1;
}
.splash_image img{
width:100%;
}
.splash_title{
color:red;
z-index: 88;
position:absolute;
top:0;
left:0;
}
Updated Fiddle
There are multiple ways to accomplish this. Here is a simple answer:
.splash_image {
position: absolute;
left: 0;
top: 2%;
height: 600px;
overflow: hidden;
z-index: 1;
}
.splash_image img {
width: 100%;
}
.splash_title {
color: red;
position: absolute;
z-index: 2;
}
.wrapper {
width: 50%;
}
<div class="splash_image">
<img src="http://fc07.deviantart.net/fs34/f/2008/290/6/4/Large_Tree_Stock_by_HauntingVisionsStock.jpg" alt="test image" />
</div>
<div class="wrapper">
<div class="splash_title">Test title to go here on image</div>
</div>
https://jsfiddle.net/jonnysynthetic/2vqgab7t/
However, you could also try setting the image as a background to the parent element as well. I wasn't sure of the scope of what this is in or a part of, so I wanted to give you the simple answer first.
.splash_image{
left: 0;
top: 2%;
overflow: hidden;
width: 100%;
z-index: 1;
height: 100%;
}
.splash_image img{
width:100%;
position:absolute;
}
.splash_title{
color: red;
z-index: 88;
position: absolute;
top: 50%;
left: 50px;
right: 0;
bottom: 0;
margin: auto;
}
.wrapper{
width: 50%;
height: 150px;
position: relative;
}
https://jsfiddle.net/2tpbx12x/5/
try this:
.splash_image img{
width:100%;
position:fixed;
}
I want a div with some text in it.
In that div I also want a div that matches the same position and proportion.
I found multiple things on stackoverflow but as soon as on thing is different it doesn't work for me.
Right now, I can't see the text anymore. Why?
It would be great if the solution doesn't affect the css for '#container'.
html:
<div id="container">
<p>Somt text to screw with me</p>
<div class="background-img"></div>
</div>
css:
#container {
position: fixed;
left: 10px;
top: 30px;
width: 100px;
height: 50px;
background: red;
}
p {
color: blue;
}
.background-img {
position: absolute;
background-size: cover;
background-repeat: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url(http://lorempixel.com/420/255);
}
for the fiddlers:
https://jsfiddle.net/clankill3r/8kaLj2su/
Add z-index: -1 to your background image.
https://jsfiddle.net/8kaLj2su/2/
A proper way to do it would be Don't use z-index at all
Change the logical order of your elements:
<div id="container">
<div class="background-img"></div>
<p>Somt text to screw with me</p>
</div>
And than simply set your p to relative:
#container {
position: fixed;
left: 10px;
top: 30px;
width: 100px;
height: 50px;
background: red;
}
p {
color: blue;
position:relative;
}
.background-img {
position: absolute;
background: url(http://lorempixel.com/420/255) 50% / cover;
width: 100%;
height: 100%;
}
<div id="container">
<div class="background-img"></div>
<p>Somt text to screw with me</p>
</div>
Use z-index to select which element overlays the other.
Working example:
(JSFiddle)
#container {
position: fixed;
left: 10px;
top: 30px;
width: 100px;
height: 50px;
background: red;
}
p {
color: blue;
z-index:2;
position:relative;
}
.background-img {
position: absolute;
background-size: cover;
background-repeat: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url(http://lorempixel.com/420/255);
z-index:1;
}
<div id="container">
<p>Somt text to screw with me</p>
<div class="background-img"></div>
</div>
p {
color: blue;
z-index:1;
position:relative;
}
Basically Z-index:1 will push the text on top and Position is necessary for z-index to work in most cases. I would not suggest -1 as incase if you have any text for that div it may be hidden too.
If you want to see your background image with text:
https://jsfiddle.net/xeyw0hvc/
Code:
#container {
position: fixed;
left: 10px;
top: 30px;
width: 100px;
height: 50px;
background: red;
z-index:10;
}
p {
color: blue;
}
.background-img {
position: absolute;
background-size: cover;
background-repeat: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url('http://lorempixel.com/420/255');
z-index:-1;
}
p {
color: blue;
z-index: 9999;
}
Using z-index, like others have suggested is fine. But I have found z-indexing to be a bit buggy, especially on legacy browsers such as older versions of IE. I would approach this differently. Change the order of your markup, make the parent container position:relative, then make both of the child elements position:absolute. That way you avoid using z-index altogether.
Like so: https://jsfiddle.net/4x5nkwgb/
HTML
<div id="container">
<div class="background-img"></div>
<p>Somt text to screw with me</p>
</div>
CSS
#container {
position: relative;
left: 10px;
top: 30px;
width: 100px;
height: 50px;
background: red;
}
p {
color: blue;
position:absolute;
top:0;
left:0;
display:block;
}
.background-img {
position: absolute;
background-size: cover;
background-repeat: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url(http://lorempixel.com/420/255);
}
I'm trying to create some static content using a div with position: fixed and then allow a solid div with a background-color to scroll over it and hide the static text below.
HTML:
<div class="container">
<div class="static-background">
<p>Why can I see this through the yellow div?</p>
<p> this should be clickable
</p>
</div>
<div class="overlay"></div>
</div>
CSS:
.container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.static-background {
position: fixed;
}
.overlay {
background-color: yellow;
height: 200%;
margin-top: 200px;
}
But the yellow div just shows the text through from the fixed background.
Why is this?
By setting z-index: -1; in .static-background i get the desired behaviour, except that the link is no longer clickable and the text is not selectable.
How do I make the background of .overlay hide the fixed elements behind while still allowing interaction (until hidden)?
Fiddle here.
.container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.static-background {
position: fixed;
}
.overlay {
background-color: yellow;
height: 200%;
margin-top: 200px;
}
<div class="container">
<div class="static-background">
<p>Why can I see this through the yellow div?</p>
<p> this should be clickable
</p>
</div>
<div class="overlay"></div>
</div>
When you give the element .static-background a negative z-index, it is being placed behind the parent .container element, which is why the element is unclickable.
To work arond this, you need to give the parent element, .container, a z-index to establish a stacking context between the elements.
In this case, you can simply give it a z-index of 1.
Updated Example
.container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: 1; /* Added */
}
.container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.static-background {
position: fixed;
z-index: -1;
}
.overlay {
background-color: yellow;
height: 200%;
margin-top: 200px;
}
<div class="container">
<div class="static-background">
<p>Some text</p>
<p>this should be clickable</p>
</div>
<div class="overlay"></div>
</div>
As an alternative, you could also just give the element .overlay a z-index of 1, and remove the z-indexs from the other elements. (example)
You might want to add some z-index to your elements:
.container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.static-background {
position: fixed;
z-index: 99;
}
.overlay {
background-color: yellow;
height: 200%;
margin-top: 200px;
position: relative;
z-index: 100;
}
Change your css to this...
.container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.static-background {
position: fixed;
z-index:4;
}
.overlay {
background-color: yellow;
height: 200%;
margin-top: 200px;
z-index:5;
position:relative;
}
Working JSFiddle http://jsfiddle.net/DivakarDass/mcdbopj6/3/
I need an image to be resized to fit in inside a div. This div must, necessarely, no matter what, be an position: absolute; div. Apart from the image have 100% from its greatest dimension, it should be centered in the other way.
I could resize to fit it, but can't center. I tried to make it inline and use vertical-align, but it didn't work.
Since code worth more than words, check my fiddle example.
This is the code from the jsfiddle:
CSS:
.relative {
width: 400px;
height: 400px;
position: relative;
<!-- Next is not important, only to display better -->
display: block;
background-color: green;
border: 3px solid yellow;
margin-bottom: 10px;
}
.absolute {
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
background-color: red;
}
img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
HTML:
<div class="relative">
<div class="absolute">
<img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg"/>
</div>
</div>
<div class="relative">
<div class="absolute">
<img src="http://us.123rf.com/400wm/400/400/pashok/pashok1101/pashok110100126/8578310-vertical-shot-of-cute-red-cat.jpg"/>
</div>
</div>
you may put the image to background instead of an img tag.
<div class="absolute">
<img src="//upload.wikimedia.org/wikipedia/commons/5/52/Spacer.gif">
</div>
.absolute {
background-image: url(http://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
however, if you can set a fixed height for the div, you can use this:
.absolute { line-height:360px; }
.absolute img { vertical-align:middle; }
Only for semi-new browsers:
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Absolutely position all the things!
transform still needs browser prefixes I hear. -webkit- works for me.
http://jsfiddle.net/rudiedirkx/G9Z7U/1/
Maybe I did not understand the question…
.absolute {
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
background-color: red;
line-height:350px; //new
}
img {
position:relative;
display:inline-block; // new
vertical-align:middle; // new
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}