I'm trying to have an image with an overlay and some text over it. The overlay I have works fine, but the text is also fading which I don't want. I'd like the text to stay the same. here is some of my code
html:
<div class="hero">
<div class="overlay">
<div class="header">
<h1 class="overlay-text"</h1>
<p class="text-center overlay-text">SOME CONTENT HERE</p>
</div>
</div>
</div>
css:
.hero {
background-image: url('http://localhost:3000/3b1425242c422b429f78f272b0a4c0f7.jpg');
background-size: cover;
position: relative;
display: block;
min-height: 101vh;
color: white;
}
.hero:after {
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0,0,0,.2);
}
.overlay-text {
z-index: 200;
}
.overlay-text:after {
z-index: 200;
}
.overlay text was just something I tried, it doesn't do anything.
Here is a little example: https://jsfiddle.net/zydkz1ed/1/
You just need to make .overlay-text absolute or relative in order for z-index to works:
.overlay-text {
position: absolute;
z-index: 200;
}
Also the h1 tag wasn't quite right, it should be: <h1 class="overlay-text"></h1>. There was a missing > sign.
Related
Hello I need to position an image as in the example. Theoretically it looks like it is positioned over 2 seperate boxes with different background colors, that is the goal, but practically it is not possible, at least for me. How to solve the problem?
Usually you'd do this with flex and vertical alignment, but since you want specifically the image to be between boxes i'd say absolute is the way to go here
.card {
display: block;
margin-left: 80px; /* image width + 20px */
}
.header, .image-container {
display: block;
margin: 0;
}
.header h1 {
margin: 0;
}
.image-container {
height: 1px;
position: relative;
}
.image-container .image {
display; inlnie-block;
width: 60px;
height: 60px;
border-radius: 50%;
background: purple;
position: absolute;
top: -50%;
left: -10px;
transform: translateY(-50%) translateX(-100%);
}
<div class="card">
<div class="header">
<h1>Header</h1>
</div>
<div class="image-container">
<div class="image"></div>
</div>
<div class="header">
<h1>Header 2</h1>
</div>
</div>
The simplest solution will be using a combination of an of z-index and position:absolute.
*A small suggestion if you may encounter the problem: you must use z-index with specifying the position (position: static will not work)
img {
width: 100px;
height: 100px;
z-index: 99;
position: absolute;
}
div {
background-color: black;
z-index: 1;
width: 200px;
height: 100px;
position: absolute;
top: 10px;
left: 5px;
}
<img src='https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1200px-Wikipedia-logo-v2.svg.png'>
<div></div>
We have CSS .block.block-dark h2 {color: #ffba0d;} but both the h2 & p are invisible below.
The div they are in has a higher z-index than the div preceding them that has the background color (<div class="column-overlay block-dark" style="opacity: 90%"> </div>).
I can't see why the background color is displaying over the top of the div with the text in it.
Help appreciated.
.column-bg-img {background-image: url('http://mercury.herodevelopment.com.au/wp-content/uploads/2020/09/Mercury_Residential_Air_Conditioning.jpg');}
.block .block-background-image.bg-scroll {
background-attachment: scroll;
}
.block .block-background-image {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.block .block-background-image, .block-overlay {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 0;
}
.columns_block .column-bg-img, .columns_block .column-overlay {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
}
.columns_block .column-overlay.block-dark {
background-color: #2d3133;
}
.block.block-dark h2, .block.block-white h2, .carousel_block .carousel .carousel-inner .carousel-item .carousel-caption .carousel-caption-inner h3 {
color: #ffba0d;
}
#media (min-width: 1200px) {
.col-xl {
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
}
<div class="container-wrapper block columns_block block-dark">
<div class="block-overlay" style="opacity: 90%"></div>
<!-- columns-block.twig -->
<div class="block-background-image bg-scroll" style="background-image: url('');"></div>
<div class="container-fluid">
<div class="row" data-scroll="in">
<div class="col-12 col-xl">
<div class="column-bg-img" style="background-image: url('http://mercury.herodevelopment.com.au/wp-content/uploads/2020/09/Mercury_Residential_Air_Conditioning.jpg');"></div>
<div class="column-overlay block-dark" style="opacity: 90%"> </div>
<div class="column">
<h2 style="text-align: center;">Residential</h2>
<p style="text-align: center;">We’ve been installing, servicing, and repairing air conditioning systems in people’s homes for decades.<br>
Our experience and expertise allows us to offer the ideal air conditioning system for you</p>
</div>
</div>
<div class="col-12 col-xl">
<div class="column-bg-img" style="background-image: url('http://mercury.herodevelopment.com.au/wp-content/uploads/2020/09/Mercury_Commercial_Air_Conditioning.jpg');"></div>
<div class="column-overlay block-dark" style="opacity: 90%"> </div>
<div class="column">
<h2 style="text-align: center;">Commercial</h2>
<p style="text-align: center;">We install air conditioners for commercial and industrial buildings,<br>
and are able to offer systems tailored to the exact needs of your business.</p>
</div>
</div>
</div>
</div>
</div>
Its because the <div> element holding the text don't have z-index property where the <div> element holding background has z-index:0 property. Try adding this css rule.
.column {
position: relative;
z-index: 2;
}
Your problem lies in the
.columns_block .column-bg-img, .columns_block .column-overlay {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
}
Change your z-index to be z-index:-999;
this should fix your issue.
so the solution to your code is :
.columns_block .column-bg-img, .columns_block .column-overlay {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -999;
}
Explanation: the default z-index for all elements is 0, if you did not put a z-index for the elements inside your overlay(ed) div, then they will also assume z-index:0 which is what is currently hiding your elements. Either put a higher z-index to your h2 , p tags or reduce the z-index of your background overlay to be in the negative range(-999).
I want to make rounded cornes on this background images. But it seems to effect the div box instead.
<div class="watermark">
<div class="watermark-image" style="background-image:url({{blogthreadlist.blogUri}});"></div>
<div class="col-md-12">Something else</div>
<div class="col-md-12">Something more..</div>
<div class="col-md-12">Something at the end</div>
.watermark {
display: block;
position: relative;
}
.watermark-image {
content: "";
opacity: 0.2;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
How do I round the cornes of the images and not the div box? The div i larger than the picture..
You can have a separate <img> tag for the image and set a border-radius
<div class="watermark-image"><img class="rounded-img" src="{{blogthreadlist.blogUri}}"></img></div>
CSS
.rounded-img {
border-radius: 3px;
}
Rounded Corner for image, try this Demo
<div class="watermark-image" style="background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNbB93-oZdCcp-OwO5m05v07sAJe42lOpOy8dRnT3aZ8uArqZJ);background-repeat: repeat-x;border-radius: 5px;"></div>
Use this
.watermark-image {
content: "";
opacity: 0.2;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
border-radius:50px;
}
I have a simple < div > (without fixed hegiht) with a text in it:
<div id="section">
<div class="container">
<h1>text</h1>
<p>More text</p>
</div>
<!-- <div id="overlay"></div> -->
</div>
The CSS for this is something like:
#section {
background: red;
overflow: hidden;
}
It's possibile to add a div with a transparent image background?
The overlay sholud be hover the main red background, but under the text.
I think is something like this, but dont works:
#section #overlay {
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 100px; /* ??? */
background: green;
opacity: 0.1;
}
#section {
background: red;
display: block;
position: relative;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
text-align: center;
z-index: 9999;
}
#overlay {
position: absolute;
left: 0;
width: 100%;
height: 100%;
top: 0;
background-color: rgba(0,0,0,0.3);
}
If I'm understanding you correctly, how about something like this:
HTML:
<div id="section">
<div id="container">
<h1>My background is transparent!</h1>
<p>More text</p>
</div>
</div>
CSS:
#section {
width: 300px;
background-color: red;
}
#container {
position: relative;
left: 50px;
width: 200px;
text-align: center;
background-color: rgba(0,0,0,0.3);
}
Results here: JSFiddle
If that's not what you wanted, can you be more specific about the positioning?
try below example using jquery ui will reduce the effort
<div id="dialog">Your non-modal dialog</div>
Open dialog
$('#open').click(function() {
$('#dialog').dialog('open');
});
jQuery(document).ready(function() {
jQuery("#dialog").dialog({
autoOpen: false,
modal: true,
open: function(){
jQuery('.ui-widget-overlay').bind('click',function(){
jQuery('#dialog').dialog('close');
})
}
});
});
I have been trying to update my site and have been having extreme difficulty with implementing an image into the site background.
I tried to create two divs, one for each side (as I want the output to be image1 - lets call it leftbg.png then content in the middle, followed by image2 - lets call it rightbg.png on the right).
So I have put the divs in the body as so:
<body>
<div id="leftbg">
<div id="rightbg">
content
</div>
</div>
</body>
And in the css file I have:
#leftbg {
float: left;
width: 22.5% (body is 55%);
background: url(images/leftbg.png) no-repeat;
z-index: 999
}
However this is not producing anything. I think it might be because my body code includes a background already, and I have tried to put z-indexes, such that my leftbg class would be dominant over the body class, however I am aware z-indexes have many problems.
This is the body css code:
body {
font:11px "Trebuchet MS", Arial, sans-serif;
color:#666;
background:maroon url(image/backgrd.png);
z-index: 0;
}
Any help would be greatly appreciated!
Try to set a height to #leftbg. Example:
#leftbg {
float: left;
height: 80px;
width: 22.5%;
background: url(images/leftbg.png) no-repeat;
z-index: 999
}
I suggest restructuring your HTML like this:
<div class="bgs">
<div class="bg left"></div>
<div class="bg right"></div>
</div>
<div class="fake-body">
<h1>Hello World!!!!!!!!!!!!!</h1>
</div>
Then you can do something like this with your CSS:
.bgs{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: green;
}
.bg{
position: absolute;
width: 50%;
height: 100%;
top: 0;
}
.bg.left{
left: 0;
background-color: red;
}
.bg.right{
right: 0;
background-color: blue;
}
.fake-body{
position: absolute;
top: 0;
left: 0;
}
I think that's pretty clean. Feel free to replace the red and blue background colors with your desired background images.
JSFiddle