I'm trying to make div that overlays background image, but not content, like this:
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 featured">
<div class="overlay"></div> <!--optional-->
<center>
<img src="img/logo.svg">
<h1>Title</h1>
</center>
</div>
</div>
</div>
Where div featured has background image:
.featured {
background-image: url(img/bg.jpg);
}
Now I've tried:
.overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(255, 255, 255, 0.4);
}
And also:
.featured:before {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(255, 255, 255, 0.4);
}
But it all makes overlay above content. Any better techniques?
<div style="background: #f6f2ea url(images/file.jpg) no-repeat center center;
min-height: 50%; background-size:cover;">
<div id="overlay-black">
<div>
<h3 class="bg-color">TEXT</h3>
</div>
</div>
</div>
and the css for overlay-black
#overlay-black {
background:rgba(50, 50, 50, 0.2);
opacity:0;
-webkit-transition: opacity .25s ease;
opacity:100;
height: 100%;
width: 100%;
}
I was able to do it just by declaring a position and z-index on the <h1> and img elements
See my fiddle here: https://jsfiddle.net/LwwgLc0w/
Related
I want to opacify just the outline of the background, that small part between the yellow container and the end of the VP. Could you please help me? Thank you.
HTML
`e
.menu-jumbotron {
background: #160b00;
background-image: url("/Users/Desktop/PROJECTS/STELLINA 2/images/food-img.jpg");
background-size: cover;
max-width: 100%;
}
.jumbotron-form {
background: #160b00 !important;
}
.border {
width: 100%;
height: 40.58rem;
border: 2px solid #fed675 !important;
}
.opacity-bg {
width: 65%;
height: 100%;
background: rgba(22, 11, 0, 0.9);
}
<section class="welcome-section">
<div class="jumbotron menu-jumbotron jumbotron-fluid">
<div class="container menu-container">
<div class="border">
<div class="opacity-bg">
<div class="headers">
<h3 class="inner-text small">vieni a trovarci</h3>
<h1 class="header display-4">Etoile Food Bar & Cocktails</h1>
</div>
<div class="phone-number-outer">
<div class="phone-number-inner">
<p>123-456789</p>
</div>
</div>
<div class="menu-button">
<button type="button" class="menu-btn btn btn-primary button-wrapper">Scopri il nostro menu</button>
</div>
</div>
</div>
</div>
</div>
</section>
Background that I want to opacify`
Is this what you try to achieve?
.menu-jumbotron {
background-color: #c7731f;
background-image: url('https://via.placeholder.com/1000x1000.jpg');
background-size: cover;
max-width: 100%;
}
.jumbotron-form {
background: #160b00 !important;
}
.border {
display: flex;
width: 100%;
height: 40.58rem;
border: 2px solid #fed675 !important;
}
.opacity-bg {
width: 65%;
height: 100%;
background: rgba(22, 11, 0, 0.5);
}
<section class="welcome-section">
<div class="jumbotron menu-jumbotron jumbotron-fluid">
<div class="container menu-container">
<div class="border">
<div class="opacity-bg">
<div class="headers">
<h3 class="inner-text small">vieni a trovarci</h3>
<h1 class="header display-4">Etoile Food Bar & Cocktails</h1>
</div>
<div class="phone-number-outer">
<div class="phone-number-inner">
<p>123-456789</p>
</div>
</div>
<div class="menu-button">
<button type="button" class="menu-btn btn btn-primary button-wrapper">Scopri il nostro menu</button>
</div>
</div>
</div>
</div>
</div>
</section>
This was an interesting problem to tackle. I came up with two possible ideas: one is somewhat complex but uses true opacity, and the other is simpler but uses a trick to fake opacity.
True Opacity Solution
The idea is to use two background images. The first one will have opacity applied to it, and the other will not. Two images are required since, to my knowledge, you can't apply opacity to just part of the image.
* {
margin: 0;
}
section.welcome {
--padding: 3em;
--border-width: 0.25em;
position: relative;
padding: var(--padding);
}
.bg {
position: absolute;
background-image: url('https://wallpapercave.com/wp/1OXITrf.jpg');
background-size: cover;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
}
section.welcome > .bg {
opacity: 0.25;
}
.inner {
position: relative;
border: var(--border-width) solid red;
overflow: hidden;
}
.inner .bg {
background-position: calc(var(--padding) * -1 - var(--border-width)) calc(var(--padding) * -1 - var(--border-width));
width: calc(100% + 2 * var(--padding) + 2 * var(--border-width));
}
.content {
color: #fff;
background: rgba(0, 0, 0, 0.75);
min-height: 10em;
width: 65%;
}
<section class="welcome">
<div class="bg"></div>
<div class="inner">
<div class="bg"></div>
<div class="content">
<p>Hello world</p>
</div>
</div>
</section>
The trickiest bit is getting the images to align. Since there are two background images at play, in order for the effect to look cohesive, background-position must be carefully calculated so it aligns with the opacity-ified image.
The key line, which moves the inner image backwards by an amount equal to the welcome sections padding and the content's border width:
background-position: calc(var(--padding) * -1 - var(--border-width)) calc(var(--padding) * -1 - var(--border-width));
Using Shadow to Fake Opacity
Opacity is used to allow part of the background to show through. If you know that the background is white or some other color, then you can fake opacity by using box-shadow. This solution is simpler since it only requires one background image now, but you still want to calculate the size of the shadow for best effect.
* {
margin: 0;
}
section.welcome {
--padding: 3em;
--border-width: 0.25em;
position: relative;
padding: var(--padding);
background-image: url('https://wallpapercave.com/wp/1OXITrf.jpg');
background-size: cover;
}
.inner {
border: var(--border-width) solid red;
box-shadow: 0 0 0 calc(var(--border-width) + var(--padding)) rgba(255, 255, 255, 0.75);
}
.content {
color: #fff;
background: rgba(0, 0, 0, 0.75);
min-height: 10em;
width: 65%;
}
<section class="welcome">
<div class="inner">
<div class="content">
<p>Hello Woorld</p>
</div>
</div>
</section>
i am using a fixed header in a bootstrap container and try to make the header a 100% width without margins and paddings. This is the structure of the html:
<div class="container-fluid">
<div class="fixed-header" data-spy="affix" data-offset-top="200">
<!-- some content inside -->
</div>
</div>
In my css:
.affix {
padding-left: 10px;
top: 0px;
width: 100%;
z-index: 9999 !important;
background-color: rgba(0, 0, 0, 0.6);
}
Image below is the result but i want the header against the left side of the screen, like the red arrow shows. How can i achieve that?
add position:fixed or position:absolute and left:0;
without this codes:
.fixed-header {
padding-left: 10px;
top: 0px;
width: 100%;
z-index: 9999 !important;
background-color: rgba(0, 0, 0, 0.6);
height:50px;
}
<div class="container-fluid">
<div class="fixed-header" data-spy="affix" data-offset-top="200">
<!-- some content inside -->
</div>
</div>
with position:absolute and left:0;
.fixed-header {
padding-left: 10px;
top: 0px;
width: 100%;
z-index: 9999 !important;
background-color: rgba(0, 0, 0, 0.6);
height:50px;
position:absolute;
left:0;
}
<div class="container-fluid">
<div class="fixed-header" data-spy="affix" data-offset-top="200">
<!-- some content inside -->
</div>
</div>
see on full page.
.fixed-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999 !important;
background-color: red;
}
<div class="container-fluid">
<div class="fixed-header">
test content
</div>
</div>
Can someone point out why my image is not becoming darker? I am teaching myself some HTML and CSS and cant get this image to become darker.
.carousel-content {
min-height: 100%;
background-position: center;
background-size: cover;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
}
.image1 {
width: 100%;
background: rgba(0, 0, 0, 0.5);
}
<div class="carousel-content">
<img class="image1" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg" />
</div>
The background is behind the image,if you want to make it darker you need to put an overlay top of it, and set transparent background there.
.carousel-content {
position: relative;
}
.overlay {
position: absolute;
left: 0;
top: 0;
height: 150px;
width: 275px;
background: rgba(0,0,0,0.5);
border-right: 2px dashed #fff;
}
<div class="carousel-content">
<img class="image1" src="http://via.placeholder.com/350x150/ff0000/ffffff" />
<div class="overlay"></div>
</div>
Or you can use css filter in modern browsers:
img {
filter: brightness(50%);
}
<img src="http://via.placeholder.com/350x150" />
You could also keep it the way you have it (assuming a black background) and just set the opacity for the image to fade it a bit and show the solid background color.
.carousel-content {
min-height: 100%;
background-position: center;
background-size: cover;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 1);
}
.image1 {
width: 100%;
opacity: .5;
}
<div class="carousel-content">
<img class="image1" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg" />
</div>
I need some help, I need to code this image:
This is what I have so far:
I tried adding a margin-top, padding-top, tried all combinations of position relative and absolute, I just need some ideias on how to do it.
This is how my code is structured:
<div class="background-oficina">
<div class="container">
<div class="col-xs-12 text-center">
<img class="logo" src="logo.png" alt="Oficina de Redação">
</div>
</div>
</div>
This is the css for the two classes that I'm using:
.background-oficina {
background: #fff url("bg-texture.png");
}
.logo {
padding-top: 50px;
margin: 0 auto;
}
You could use an additional absolutely positioned element to which you assign the repeated background pattern and which you put behind the original element by using z-index: -1:
html, body {
margin: 0;
}
.background-oficina {
position: relative;
border: 1px solid #333;
border-bottom: none;
}
.bg-container {
position: absolute;
z-index: -1;
left: 0;
top;
width: 100%;
height: 120px; /* or whatever height is desired */
background: url("http://placehold.it/20x15/cff");
}
.text-center {
text-align: center;
}
.logo {
padding-top: 50px;
margin: 0 auto;
}
<div class="background-oficina">
<div class="bg-container"></div>
<div class="container">
<div class="col-xs-12 text-center">
<img class="logo" src="http://placehold.it/200x150/fb7" alt="Oficina de Redação">
</div>
</div>
</div>
Your trying this, you can set default height and width to parent div that consist of that logo then using position:absolute you can push that out of parent div, but don't add overflow:hidden to parent div or else it hides your image or element that you are trying to push outside parent div as hidden.
.background-oficina {
background: #fff url("https://via.placeholder.com/800x100/000") no-repeat;
box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.2);
background-size: 100% 100%;
width: 100%;
height: 100px;
position: relative; /*Add this*/
}
.logo {
padding-top: 50px;
margin: 0px auto;
position: absolute; /*Add this*/
bottom: -20px; /*Add this*/
}
<div class="background-oficina padding margin-bottom">
<div class="container">
<div class="col-xs-12 text-center margin-bottom">
<img class="logo" src="https://via.placeholder.com/50/ff2" alt="Oficina de Redação">
</div>
</div>
</div>
I'm trying to create a text block with transparent background which is the same width as the image. However if I just add padding to the header then some may overlap or not be long enough due to the varying length in text.
Currently looks like this: http://puu.sh/sdBCX/994cc31da8.png
Here is the relevant HTML:
<div class="container-fluid">
<div class="row">
<div class="artist-grid">
<div class="col-lg-2"></div>
<div class="col-lg-2">
<img id="#artistTile" src="https://dummyimage.com/300x300">
<h3><span>BASSNECTAR</span></h3>
</div>
<div class="col-lg-2">
<img id="#artistTile" src="https://dummyimage.com/300x300">
<h3><span>DATSIK</span></h3>
</div>
<div class="col-lg-2">
<img id="#artistTile" src="https://dummyimage.com/300x300">
<h3><span>CHAINSMOKERS</span></h3>
</div>
<div class="col-lg-2">
<img id="#artistTile" src="https://dummyimage.com/300x300">
<h3><span>ZEDS DEAD</span></h3>
</div>
<div class="col-lg-2"></div>
</div>
</div>
</div>
And the relevant CSS:
h3 {
position: absolute;
top: 244px;
width: 100%
}
h3 span {
color: white;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
.artist-grid {
padding-top: 22px;
}
#artistTile {
position: relative;
max-width: 100%;
}
Cheers!
div {
width: 200px;
height: 200px;
display: block;
position: relative;
}
div::after {
content: "";
background: url(image.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}