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>
Related
I'm trying to blur the edges of an image like the picture shown at https://stackoverflow.com/a/24953573.
I need to do this on a foreground image (not one set in css) because the img url is dynamically changed. But box-shadow seems to have no effect on a foreground image. Also I'm using the Bootstrap 4.3 img-fluid class.
In other words, the code at the SO post referenced above works, but the edges on this image are not blurred (css inline for simplicity):
<img src="/images/mypic.jpg"
class="img-fluid"
style="box-shadow: 0 0 5px 5px white inset;">
.img-fluid sets max-width: 100% and height:auto. I tried over-riding these with specific values (which I don't want to do to maintain a responsive image), but it had no effect either.
You need to wrap img tag by div element with class name of .img-blur so use the :after pseudo-element can be used to insert some content after the content of an element.
.img-blur{
position: relative;
display: inline-block;
}
.img-blur:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 10px 10px #ffffff;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container">
<div class="row" >
<div class="col-4 my-3">
<div class="img-blur">
<img class="img-fluid" src="https://via.placeholder.com/400x400/22ff22">
</div>
</div>
<div class="col-4 my-3">
<div class="img-blur">
<img class="img-fluid" src="https://via.placeholder.com/400x400/ffff22">
</div>
</div>
<div class="col-4 my-3">
<div class="img-blur">
<img class="img-fluid" src="https://via.placeholder.com/400x400/22ff22">
</div>
</div>
</div>
</div>
There is a problem with style images with inset.
But you have 2 alternatives to do this. You can add a container with position relative and inside put img with class img-fluid and div with positon absolute to this container.
The second option is to set a container with position relative and img inside and style that container with pseudo-class ::after.
If you will do that it works but there will be a problem with the right box-shadow that if img is smaller than a container. You can fix these if you will use some JS code.
I made an example with jQuery ( cause you are using bootstrap and bootstrap is using jquery).
https://codesandbox.io/s/flamboyant-wing-z9lhm
Unfortunally, CSS 'Inset' Box shadows don't work on img tags. To workaround this, you have a few couple options, for example, is possible wrap the image on a div tag and use a pseudo-element to apply the box-shadow on it.
The problem here is that, as standard, the div tag is a "Block" element, and as so will cover the entire parent width. You could fix this applying a display: inline-block or a float: left property. Perhaps is not the best "standard-compliant", but will work on this case. I attach a example with this concept below:
div {
position: relative;
display: inline-block;
}
div:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 5px 5px white inset;
}
<div>
<img src="https://picsum.photos/200/300" class="img-fluid">
</div>
I am trying to center a bootstrap panel vertically and horizontally. The
structure of the document is as follows:
<body>
<div class="container parent">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-default">
<div class="panel-body text-center">A Basic Panel</div>
</div>
</div>
</div>
</div>
</body>
The CSS:
.parent {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
JSFiddle
This seems to center the panel horizontally, but not vertically. Any help is appreciated!
I did two changes :
Html
<div class="col-xs-12 col-md-4 col-md-offset-4">
Css(should be declared after bootstrap css stylesheet):
.panel{
margin-top: -25px;
}
.parent {
height: 100vh;
padding-top: 50vh;
}
Why margin-top: -25px ? because in the developers console i saw that .panel css box model is taking 50px in height and its starting from 50 vh height(so it will not be centered and will go below extra 25px) so i subtracted the extra height from .panel to center it correctly.
You can't center a col-md-3 because there are 12 columns total, leaving 9 behind, which you cant split evenly. If you had an even number of columns you were using, you could use col-md-offset-#.
You can center something vertically by using .parent { top: 50% }
The % value can be changed depending where you would like it to appear.
This value is also determined by the percentage of the div size that your element is inside.
I am trying to arrage image and text in align in the same. I tried below for not working. How arrage like in the image.
<div >
<img src="~/Content/Images/u130.png" alt="" />
<div>
<span style="display:inline; ">Belong to a membership of more than 110,000 members in 141 countries and receive recognition for your contributions</span>
</div>
Try inlining the img and putting both elements in the same div. Also, spans are inline by default so you don't include the style property.
<div>
<img src="~/Content/Images/u130.png" style="display: inline;">
<span>
Belong to a membership of more than 110,000 members in 141
countries and receive recognition for your contributions
</span>
</div>
use <div>s and vertical-align: middle like below:
img {
height: 30px;
}
div {
display: inline-block;
vertical-align: middle;
max-width: 500px;
}
<div>
<img src="http://moneta.com.mx/web/wp-content/uploads/2014/02/check.png" alt="" />
</div>
<div>
<span>Belong to a membership of more than 110,000 members in 141 countries and receive recognition for your contributions</span>
</div>
You are going to be hard pressed to make it align with multiple rows of text depending on which browsers you are trying to support. The vertical-align property is handled very differently between browsers, especially older browsers.
What I usually do is hack it a little bit by setting my text containers to position: relative; and then absolute position my image outside to the left and center using top and negative margins.
To apply this to your code you should be able to simply copy the .feature:after rule into your style sheet. Update the image path with your image, the height/width to match your image size, and the top margin should be changed to half the height of your bullet image. After that, it will actually create the image DOM element for you via the pseudo selector.
.feature {
max-width: 300px;
padding: 10px 30px;
position: relative;
}
.feature:after {
background: url(http://hotmexchili.com/media/infortis/blocks/product_view/bullet.png) center center no-repeat;
content: "";
display: block;
height: 17px;
left: 0px;
margin-top: -8.5px;
position: absolute;
top: 50%;
width: 17px;
}
<div class="feature">
This is a single line feature
</div>
<div class="feature">
This is a longer feature that should wrap to two lines but still have the icon centered on the left!
</div>
div {
display: inline-block;
vertical-align: top;
max-width: 90%;
}
I prefer using jQuery to set the max-width by subtracting the width of img.
v-align the img at top would make it align with the first line.
<div>
<img src="~/Content/Images/u130.png" alt="" />
</div>
<div>
<span>Belong to a membership of more than 110,000 members in 141 countries and receive recognition for your contributions</span>
</div>
I have text that is overlayed on an image which is set as a background (main-logo). It works well for desktop but when scaling down to tablet or mobile devices the text remains a larger font size and just cuts off.
I'd like the background to expand and the text to stay inside the background (some scaling down of the text is fine). This is what I have:
<div class="full-logo" id="top">
<div class="col-lg-12 main-logo img-responsive">
<img src="\img\long.png" class="" alt="">
<br>
<h1 class="text-center">
<div class="col-md-8 col-centered-headline">WHO WE ARE</div>
</h1>
<h2 class="text-center">
<div class="col-md-8 col-centered-headline">
Our conference is one of the best technology conferences on the planet as voted on by readers of Industry Magazine. We take a different approach.
And that difference works for our attendees, ranging from Fortune 500 companies to the most exciting startups in the world.
Our speakers are world class, but our networking is “simply legendary”.
</div>
<br>
</h2>
</div>
</div>
And CSS contains this info:
/* Full Width Logo*/
.full-logo {
width: 100%;
height: 400px;
background-image: url('/img/bluesky.jpg');
background-size: cover;
margin-top: -9px;
}
.col-centered-headline {
display: inline-block;
float: none;
text-align: center;
margin-right: -4px;
color: white;
}
First, I would direct your toward Media Queries. But in your case, can you get away with just setting min-height on .full-logo?
.full-logo {
width: 100%;
min-height: 400px; /* <-- change 'height' to 'min-height' */
background-image: url('/img/bluesky.jpg');
background-size: cover;
margin-top: -9px;
}
I'm trying to produce a look for my mvc application that has a property from my model as a transparent background image then the title and a description as the text on the image, but I want the children of the div to not be transparent. I've looked around the internet, and have seen a few different ways to do it, like changing the background rgba to a certain value, but I can't seem to get it to work. Any help would be greatly appreciated. Thanks.
Here's my code
#foreach (var item in Model)
{
<div style="height: 250px; background-size: cover; opacity: .5; border-bottom: 3px solid #e3c340; background-image:url(#item.Image);background-size: 100% 100%; " class=" hidden-md hidden-lg img-responsive">
<div class="row" style=" background:rgba(56,255,255,0.1);;">
<h1 style="font-weight:bold;" >#item.Name </h1>
</div>
</div>
}
You can't make the background-image be semi-transparent if it isn't semi-transparent itself.
Lowering an elements opacity will do the same for it's children, which is quite logical, but can be frustrating at first.
Try this for example:
<div style="background-color: rgba(255, 0, 0, 0.5);">
<p>I am perfectly opaque!</p>
</div>
Here we set the background color to be semi-transparent.
If you want to do this with an image, you would need to put it on it's own layer like so:
<div style="position relative;">
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(/some/path/image.jpg); background-size: cover; opacity: 0.5;"></div>
<p>I'm still opaque!</p>
</div>