This question already has answers here:
How to apply a CSS filter to a background image
(22 answers)
Closed 3 years ago.
As the title says. How do I blur the background-image of my container without blurring the text in front of it?
.container a .body-container {
background-image: url("https://i2.wp.com/digital-photography-school.com/wp-content/uploads/2019/02/Landscapes-01-jeremy-flint.jpg");
filter: blur(1px);
}
<div class="card">
<div class="head">
<div class="title">
<span>Card Title</span>
</div>
</div>
<div class="body-container">
<div class="body">
<div class="content">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>
</div>
</div>
</div>
I made the JSBin here, https://jsbin.com/gizoyomuyi/1/edit?html,css,output
Update: Apologies, I updated the JSBin link because the one I posted earlier was outdated.
Note: The left card is the changes I made based on #Irin's answer, and the right card is as is.
To make background blur without affecting text, you will have to take two different div. one for the background image and another for the text.
You will have to use position: absolute for the div with content.
Please follow the code below using your image name :
<html>
<head>
<style>
.body-container {
background-image: url(https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
filter: blur(5px);
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.body {
position: absolute;
top: 50%;
color: #fff;
margin: 0px auto;
width: 50%;
text-align: center;
right: 0%;
left: 0%;
font-size:25px;
}
</style>
</head>
<body>
<div class="card">
<div class="head">
<div class="title">
<span>Card Title</span>
</div>
</div>
<div class="body-container">
</div>
<div class="body">
<div class="content">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>
</div>
</div>
</body>
</html>
try out this
body,
html {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
a,
a:hover {
color: black;
text-decoration: none;
}
.head {
border: 1px solid gray;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
padding: 20px;
}
.bg-image {
/* The image used */
background-image: url("https://i2.wp.com/digital-photography-school.com/wp-content/uploads/2019/02/Landscapes-01-jeremy-flint.jpg");
/* Add the blur effect */
filter: blur(5px);
-webkit-filter: blur(5px);
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Position text in the middle of the page/image */
a {
color: white;
font-weight: bold;
position: absolute;
top: 74%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80%;
padding: 20px;
text-align: center;
}
<div class="head">
<div class="title">
<span>Card Title</span>
</div>
</div>
<div class="bg-image"></div>
<div>
<a href="#">
<div class="card body-container">
<div class="">
<div class="body">
<div class="content">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>
</div>
</div>
</div>
</a>
</div>
Related
This question already has answers here:
Can I set background image and opacity in the same property?
(15 answers)
Closed 3 years ago.
The background img of the header should be translucent and the text should be fully visible.
I've tried a multitude of fixes on this site and others including using :before
HTML:
<div class="banner">
<div class="bannerimage">
<div class="bannertext">
<h1>Welcome to my Portfolio</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h2>
A link <span><i class="fas fa-caret-right"></i></span>
</div>
</div>
</div>
CSS:
.banner {
width: 100%;
}
.bannerimage {
background-image: url("img/banner.jpg");
position: relative;
height: 500px;
}
.bannerimage:before{
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0,0,0,0.7);
opacity: 0.4;
}
.bannertext {
color: 111;
position: relative;
text-align: right;
}
Background should be translucent foreground text should be solid.
You can use this code
body {
margin: 0;
padding: 0;
}
.banner {
width: 100%;
}
.bannerimage {
width: 100%;
height: 500px;
display: block;
position: relative;
background: rgba(0,0,0,0.7);
}
.bannerimage::after {
content: "";
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/codepen.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
opacity: 0.4;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
.bannertext {
color: 111;
position: relative;
text-align: right;
}
.bannertext h1 {
margin-top: 0px;
color: #fff;
}
.bannertext h2 {
color: #fff;
}
.bannertext a {
color: #fff;
}
<div class="banner">
<div class="bannerimage">
<div class="bannertext">
<h1>Welcome to my Portfolio</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h2>
A link <span><i class="fas fa-caret-right"></i></span>
</div>
</div>
</div>
If you give opacity to parent .banner-image it will affect its child. So update your code like:
.banner {
width: 100%;
position: relative;
}
.bannerimage {
background-image: url(https://via.placeholder.com/1000x700);
position: relative;
height: 500px;
opacity: 0.5;
background-size: cover;
}
.bannertext {
color: #111;
text-align: right;
position: absolute;
top: 0;
width: 100%;
}
<div class="banner">
<div class="bannerimage">
</div>
<div class="bannertext">
<h1>Welcome to my Portfolio</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h2>
A link <span><i class="fas fa-caret-right"></i></span>
</div>
</div>
I am having issues getting .gridSecBlock to expand with height:auto in my viewport < 640. If you click on the jsfiddle link below and modify the viewport to be less than 640 pixels, you will see that the .gridSecBlock for the content .gridText isn't expanding like it should with height: auto. I have a min-height set, but do not want to have to adjust this for so many media queries.
Then for some reason my total-center class isn't centering the .gridSecBlock vertically for the content blocks.
Does anyone see what I am doing wrong?
Jsfiddle link to see mobile viewport
.total-center {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
}
.left {
float: left;
}
.right {
float: right;
}
.gridSecCont {
display: block;
height: 70vh;
}
.gridSecWrap {
width: 100%;
position: relative;
}
.gridSecBlock {
width: 50%;
height: 100%;
display: inline-block;
vertical-align: top;
position: relative;
overflow: hidden;
}
.gridSecBlock img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gridSecText {
text-align: left;
}
.gridSecBlockWrap {
width: 65%;
}
/*---------------------------------------------- MEDIA QUERY 640 --------------------------------------------*/
#media screen and (max-width:640px) {
/*--- Grid Section --*/
.gridSecCont {
display: block;
height: auto;
}
.gridSecBlock {
width: 100%;
height: auto;
display: block;
min-height: 270px;
}
.gridSecBlockWrap {
width: 75%;
height: auto;
padding: 10px 0;
}
}
<section id="gridSec">
<div class="gridSecWrap">
<div class="gridSecCont">
<div class="gridSecBlock left">
<img src="https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1513398884/cacimba-do-padre-beach-brazil-365BEACHES1217B.jpg?itok=DUFLlpiW">
</div><div class="gridSecBlock right gridText">
<div class="total-center gridSecBlockWrap">
<p class="dG gridSecText">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
</div>
</div>
<div class="gridSecCont">
<div class="gridSecBlock right">
<img src="https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1513398884/cacimba-do-padre-beach-brazil-365BEACHES1217B.jpg?itok=DUFLlpiW">
</div><div class="gridSecBlock left gridText">
<div class="total-center gridSecBlockWrap">
<p class="dG gridSecText">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
</div>
</div>
</div>
</section>
I think you can achieve what you are going for much easier with flexbox. I cleaned it up a bit and got rid of seemingly unnecessary divs and other styles.
Threw it into a codepen as well: https://codepen.io/samandalso/pen/MXbYNz
.gridSecCont {
display: flex;
justify-content: center;
align-items: center;
height: 70vh;
}
.gridSecWrap {
width: 100%;
position: relative;
}
.gridSecBlock {
overflow: hidden;
flex-basis: 50%;
}
.gridSecBlock img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gridSecText {
text-align: left;
flex-basis: 50%;
padding: 3rem;
}
/*---------------------------------------------- MEDIA QUERY 640 --------------------------------------------*/
#media screen and (max-width:640px) {
/*--- Grid Section --*/
.gridSecCont {
display: block;
height: auto;
}
.gridSecBlock {
width: 100%;
height: auto;
display: block;
min-height: 270px;
}
.gridSecBlockWrap {
width: 75%;
height: auto;
padding: 10px 0;
}
}
<section id="gridSec">
<div class="gridSecWrap">
<div class="gridSecCont">
<div class="gridSecBlock left">
<img src="https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1513398884/cacimba-do-padre-beach-brazil-365BEACHES1217B.jpg?itok=DUFLlpiW">
</div>
<div class="gridSecBlock right gridText">
<p class="dG gridSecText">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
</div>
<div class="gridSecCont">
<div class="gridSecBlock right">
<img src="https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1513398884/cacimba-do-padre-beach-brazil-365BEACHES1217B.jpg?itok=DUFLlpiW">
</div>
<div class="gridSecBlock left gridText">
<div class="total-center gridSecBlockWrap">
<p class="dG gridSecText">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
</div>
</div>
</div>
</section>
How can i make a div grow max size to the bottom. and stop when it reaches a absolute positioned div at the bottom. I right now have this:
div {
position: relative;
display: block;
border: 1px solid black;
}
.wrap {
clear: both;
width: 60%;
display: block;
heigth: 150px;
}
.img {
float: left;
width: 150px;
height: 150px;
margin-right: 15px;
}
.right {
height: 150px;
overflow: hidden;
}
.details {
position: absolute;
bottom: 0;
}
.title {
display: block;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
<div class="wrap">
<div class="img">
img
</div>
<div class="right">
<div class="hover">
<div class="title">
<h5>lots of text</h5>
</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="details">
<span>some link and detail</span>
</div>
</div>
</div>
<div class="wrap">
<div class="img">
img
</div>
<div class="right">
<div class="hover">
<div class="title">
<h5>litle text</h5>
</div>
<div class="text">
lorum ipsum
</div>
</div>
<div class="details">
<span>some link and detail</span>
</div>
</div>
</div>
<div class="wrap">
<div class="img">
img
</div>
<div class="right">
<div class="hover">
<div class="title">
<h5>Very long title that does not fit on one line with all these words and so on on on on on</h5>
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="details">
<span>some link and detail</span>
</div>
</div>
</div>
<div class="wrap">
<div class="img">
img
</div>
<div class="right">
<div class="hover">
<div class="title">
<h5>large detail text</h5>
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="details">
<span>allot of details that don't fit on one line and so on on on on on on on on</span>
</div>
</div>
</div>
I want .text to grow maximum in height while .title and .detail can be dynamic in height because of the content.
Have you tried using Materialize CSS for this design? The way you'd like to design your sections are similar to "cards". This answer on stackoverflow contains the original code from my example, https://stackoverflow.com/a/32271807/5914723
Example jsFiddle
HTML
Card Title
I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.
This is a link
<hr>
CSS
.card-image {
float: left;
width: 40%;
height: 150px;
}
.card-image img {
height: 100%;
}
.right-content {
width: 60%;
float: left;
height: 250px;
}
.card-title {
padding-left: 20px;
height: 10%;
}
.card-action {
height: 10%;
}
hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}
I am trying to display all of an element's children after itself. I have a <div> wrapped in a <section> that has position: absolute and its top, right, bottom, and left are all 0. After that <div>, I have another <div> wrapped in a <section>. That div just has a <h3> with a <p> under it.
This is the HTML code:
<main>
<section class="fullscreen">
<div class="container">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet</p>
Link
</div>
</section>
<section>
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</main>
...and this is the CSS:
main {
clear: both;
}
main section:nth-child(1) {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -10;
}
main section:nth-child(1) div.container {
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: center;
width: 100%;
margin: auto;
}
How can I display the page like this, without defining a margin after the .fullscreen?
From your code it appears that you want the section elements to take up the full screen height.
You don't need positioning to do that. Viewport units now have excellent support and you can just allocate the height to be 100vh.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
main {
clear: both;
/* not required there are no floats */
}
main section {
height: 100vh;
border-bottom: 2px solid red;
}
main section div.container {
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: center;
width: 100%;
}
<main>
<section class="fullscreen">
<div class="container">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet</p>
Link
</div>
</section>
<section id="section2">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</main>
I am trying to create a sidebar divider that will touch the edge of the wrapper (both top and bottom), which will auto adjust in height as more content gets added. When the browser width resizes and the information collapses, I want the divider to disappear.
Here is the site: http://bobbyomari.com/opa/
Here's my code:
<div class="container">
<div class="wrapper">
<div class="row">
<div class="col-md-12">
<!-- BODY -->
<div class="row">
<div class="col-md-9">
<h3>Campus News</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!-- SIDEBAR -->
<div class="col-md-3">
<div class="sidebar-divider hidden-xs hidden-sm">
<h3>Calendar of Events</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is the CSS:
.sidebar-divider {
border-left: 1px solid #ccc;
top: 0;
right: 0;
padding-left: 30px;
}
.wrapper {
width: 100%;
height: auto;
background-color: #fff;
border-radius: 3px
border: 1px solid #ccc;
margin: 30px 0px;
padding: 30px 30px;
}
Thanks in advance for help.
you could draw it from a pseudo element set in absolute positionning.
div.wrapper {
position:relative
}
/* ! remove sidebar-divider border */
div.wrapper:before {
content:'';
border-left: 1px solid #ccc;
position:absolute!important;
top:0;
bottom:0;
right:24.25%;
}
it could be drawn from .sidebar-divider too with a bit more CSS
div.wrapper {
position:relative
}
div.wrapper * {
position:static;
border:none;
}
/* ! remove sidebar-divider border */
div.sidebar-divider:before {
content:'';
border-left: 1px solid #ccc;
position:absolute!important;
top:0;
bottom:0;
right:24.25%;
}