I'd like to cover with overlay a specific div where width and height of that div is variable. How can I do that?
Here is the fiddler for reference.
.c1 {
border: 1px solid red;
padding: 10px;
margin: 5px;
}
.overlay {
position: relative;
z-index: 1000;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.85);;
opacity: 1;
}
<p>
content before
</p>
<div class="c1">
<div class="overlay"></div>
<div class="c2">
<h1>
some content
</h1>
<p>
some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay
</p>
<p>
some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay
</p>
</div>
</div>
<p>
content after
</p>
You can get it with positioning parent and overlay container, when width and height is variable. Set parent .c1 position as relative and the .overlay position as absolute. Check below snippet for reference.
.c1 {
border: 1px solid red;
padding: 10px;
margin: 5px;
position: relative;
}
.overlay {
background-color: rgba(255, 255, 255, 0.85);
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
<p>
content before
</p>
<div class="c1">
<div class="overlay"></div>
<div class="c2">
<h1>
some content
</h1>
<p>
some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content
under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay
</p>
<p>
some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay
</p>
</div>
</div>
<p>
content after
</p>
Related
This question already has answers here:
Set opacity of background image without affecting child elements
(15 answers)
Can I set background image and opacity in the same property?
(15 answers)
Closed 3 years ago.
I have the following code and I would like to decrease the brightness of the image so that I can color the text-white.
However, the brightness filter carries onto the text. I've tried making an adjustment to the z-index, but it is not working. Can someone please provide me with a solution?
.jumbotron {
background-size: cover;
background-position: center;
width: 100%;
filter: brightness(80%);
z-index: -1;
}
.z-index {
color: white;
}
<div class="jumbotron card card-image" style="background-image: url(http://mediad.publicbroadcasting.net/p/wamc/files/201609/codingsnippet.jpg);">
<div class="text-center py-5 px-4 z-index">
<div>
<h2 class="card-title pt-3 mb-5 font-bold">E-commerce and Blogging website Experts</h2>
<p class="mx-5 mb-5">Do you need to increase traffic to your website? Do you want to increase sales on your e-commerce store? We're here to help you in that regard!
</p>
</div>
</div>
</div>
The structure of your HTML tags makes it difficult to achieve your goal. I would
Create a div giving it a class container that takes position: relative.
Take out the text div z-index from the image div jumbotron and put both the divs in container div.
Set the size of the image by giving this value to the image div, width: 100%; height: 120px;
Then give the text containing div position: absolute to float it and also give it top: 0; left: 0; to manually place the texts on top of the image div.
This way, the text div won't be affected when the image div is styled.
.container {
position: relative;
}
.jumbotron {
background-size: cover;
background-position: center;
width: 100%;
height: 120px;
filter: brightness(60%);
}
.z-index {
color: white;
position: absolute;
top: 0;
left: 0;
}
<div class="container">
<div class="jumbotron card card-image" style="background-image: url(http://mediad.publicbroadcasting.net/p/wamc/files/201609/codingsnippet.jpg);"></div>
<div class="text-center py-5 px-4 z-index">
<h2 class="card-title pt-3 mb-5 font-bold">E-commerce and Blogging website Experts</h2>
<p class="mx-5 mb-5">Do you need to increase traffic to your website? Do you want to increase sales on your e-commerce store? We're here to help you in that regard!</p>
</div>
</div>
I have a row using WP Bakery (Visual Composer formerly) which has two columns that are just background images. There is no content. However, when I set the row for Full Height in the Front end editor from WordPress, the row still doesn't stretch vertically to accommodate the full image height. It shows maybe 1/4 of the image at the top and then the rest is cut off.
<div style="position: relative; left: -45px; box-sizing: border-box; width:
1256px;" data-vc-full-width="true" data-vc-full-width-init="true" data-vc-
stretch-content="true" class="normal_height vc_row wpb_row vc_row-fluid
vc_row-o-full-height vc_row-o-columns-stretch vc_row-o-equal-height vc_row-
flex">
<div class="wpb_column vc_column_container vc_col-sm-6 vc_col-has-fill">
<div class="vc_column-inner vc_custom_1517014250070">
<div class="wpb_wrapper">
</div>
</div>
</div>
<div class="wpb_column vc_column_container vc_col-sm-6 vc_col-has-fill">
<div class="vc_column-inner vc_custom_1517014312168">
<div class="wpb_wrapper"></div>
</div>
</div>
</div>
CSS for left image:
.vc_custom_1517014250070 {
background-image: url(/uploads/2018/01/hbar-chart.jpg?id=2944)
!important;
background-position: 0 0 !important;
background-repeat: no-repeat !important;
}
CSS for right image:
.vc_custom_1517014312168 {
background-image: url(/uploads/2018/01/f-mix.jpg?id=2943) !important;
background-position: 0 0 !important;
background-repeat: no-repeat !important;
}
Don't use a background image, but insert an image with full width.
A page element will never adjust its size to a to a background image, it's only possible (not the rule) the other way round. So just use an img element with your image
You can use raw html widget into the column with background image.
Firstly, choose background style as "cover" than
<h2><br><br><br><br></h2> <!--how many space as you need to visualize background image-->
Than it will be cover the height of the row
JSFiddle
<header>
<p>
header stuff
</p>
<div id="dropdown">
<p>
a
</p>
<p>
b
</p>
<p>
c
</p>
</div>
</header>
I have a header that's fixed. Inside this I have a dropdown which i want to be 100% height of the page, yet setting height to 100% makes it 100% height of the parent element. Is there anyway to set it to be 100% of the page?
change .dropdown to:
#dropdown{
position: absolute;
width: 100%;
height: 100vh;
background: tomato;
top: 100px;
}
updated fidde here
I’m using flexboxes to spread 3 boxes across a row. They’re all in ul and li . I’ve put images in the li and it all spreads nicely, as advertised.
The problem arise when I position a few absolute boxes in my flex items, with text in them. These absolute divs are taken out of the flex items and positionned to the beginning of the row.
One workaround I found is to use relative divs instead of an absolute one, put it below my image and the use its top property, to move it on top of my image, but that leaves an empty white row below the image.
So I’m wondering what’s the “official” way of precisely positionning elements inside a flex item ?
Without code and even a graphic to illustrate the desired result this answer is a bit of a shot in the dark.
The primary assumption I'm going to make is that you want to overlay text on top of an image. The fact that you're using flexbox shouldn't be an issue if this assumption is true.
Typically when you want to overlay text on top of an image you absolute position it and and to prevent that absolute positioning from rendering outside of the parent element you set the parent element to position: relative;.
Notes:
Sometimes you might need to create a containing element just for the image and text overlay if there's other content associated with the image and text.
You might also have to set the element containing the image to inline so the parent containing element matches the size of the image.
Here's my suggestion:
ul,
li {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
ul {
display: flex;
justify-content: space-around;
}
li {
position: relative;
}
.overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<ul>
<li>
<img src="http://placehold.it/100x100/ffcc00/?text=1">
<div class="overlay">
Text Overlay 1
</div>
</li>
<li>
<img src="http://placehold.it/100x100/ffcc00/?text=2">
<div class="overlay">
Text Overlay 2
</div>
</li>
<li>
<img src="http://placehold.it/100x100/ffcc00/?text=3">
<div class="overlay">
Text Overlay 3
</div>
</li>
</ul>
And here's an example if there's additional content associated with the image and text overlay.
ul,
li {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
ul {
display: flex;
justify-content: space-around;
}
li .intro {
position: relative;
}
.overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<ul>
<li>
<div class="intro">
<img src="http://placehold.it/100x100/ffcc00/?text=1">
<div class="overlay">
Text Overlay 1
</div>
</div>
<p>
Some content here. Some content here. Some content here. Some content here.
</p>
<p>
Some content here. Some content here. Some content here. Some content here.
</p>
</li>
<li>
<div class="intro">
<img src="http://placehold.it/100x100/ffcc00/?text=2">
<div class="overlay">
Text Overlay 2
</div>
</div>
<p>
Some content here. Some content here. Some content here. Some content here.
</p>
<p>
Some content here. Some content here. Some content here. Some content here.
</p>
</li>
<li>
<div class="intro">
<img src="http://placehold.it/100x100/ffcc00/?text=3">
<div class="overlay">
Text Overlay 3
</div>
</div>
<p>
Some content here. Some content here. Some content here. Some content here.
</p>
<p>
Some content here. Some content here. Some content here. Some content here.
</p>
</li>
</ul>
I'm looking for some help with my CSS layout. I can't seem to get it how i want. Here is an image of what i am looking for.
Required Layout Image
I can't get div2 to fill its' section with the overflow being visible to the bottom of the left column.
Here is my code that i am using to show where i am at. Please some help would be great! I'm looking to target IE6+
body {
margin: 0;
padding: 0;
height: 100%;
overflow: auto;
}
.leftContent {
position: absolute;
left: 0;
top: 0;
padding: 0;
width: 250px;
height: 100%;
color: #333;
border: red ridge;
background: blue;
overflow: hidden;
}
.centreContent {
margin-left: 254px;
margin-right: 1px;
margin-bottom: 20px;
color: #333;
background: green;
border: red ridge;
padding: 0 0px;
height: 100%;
}
.rightContent {
position: absolute;
right: 20;
top: 0;
padding: 0;
width: 100px;
color: #333;
background: black;
border: red ridge;
}
.div1 {
border: black solid;
}
.div2 {
overflow: auto;
height: 100%;
border: black solid;
}
<!-- Start Left Column-->
<div id="leftColumn" class="leftContent">
<div id="div1" class="div1">
CONTENT
</div>
<div id="div2" class="div2">
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT
</div>
</div>
<!-- End Left Column-->
<!-- Start Centre Column-->
<div id="centreColumn" class="centreContent">
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
</div>
<!-- End Centre Column-->
<!-- Start Right Column-->
<div id="rightColumn" class="rightContent">
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
</div>
<!-- End Right Column-->
Thanks for your help.
Why you're using "position: absolute ?
Remove position, left, right bla bla and
.leftContent { float:left;}
.centreContent {float:left;}
.rightContent {float:right;}
use this CSS Codes...