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>
Related
I am currently trying to code a frontpage according this design, using bootstrap 5. I've managed to set the background to cover the entire page. However, I can't seem to get the white transparent overlay-block right, and the placing of the content inside. This should also be responsive according to this design.
Whats the best solution for doing this?
Currently I've got:
Startpage html
<div class="startpage">
<div class="hero">
<div class="container">
<div class="row">
<div class="col-md-7 offset-md-1">
<h1 class="pb-2 pb-md-4">Heading Title</h1>
<button class="btn btn-primary mt-3" type="button">Button Title</button>
</div>
</div>
</div>
</div>
</div>
Startpage css
.startpage {
height: 100vh;
background: url(URL HERE);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.hero {
background-image: linear-gradient(rgba(250, 250, 250, 0.95), rgba(255, 255, 255, 0.8));
min-height: 70%;
padding-top: 200px;
}
On the navbar I've got:
header {
position: absolute;
width: 100%;
}
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>
Header images on this site I'm building are appearing too dark - I can't see any opacity is being applied - http://www.stayinblackpool.co.uk/ - any ideas what could be causing this?
Tried to make opacity 1.0
Opacity is being applied - in the form of background alpha key. Here is your markup:
<div class="featured-image">
<img src="http://www.stayinblackpool.co.uk/wp-content/uploads/2019/02/header3.jpg">
<div class="overlay">
<div class="grid-mid">
<h1 class="page-title">Serviced Holiday Apartments in North Shore, Blackpool</h1>
</div>
</div>
</div>
and here's associated CSS:
.overlay {
background: rgba(0,0,0,0.5);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
If you notice background has rgba, 0.5 is causing 50% opacity. I would remove the background attribute completely.
I have a sprite that I'm able to display per each list-group-item. However, I'm not able to individually style each image for .one, .two etc.
<div class="list-group">
ONE
TWO
<span class="list-group-item three">Share <span class="fb"><!--display FB icon--></span></span>
</div>
LESS:
Place text on left, align image on right side, works.
Now I want to style the individual images within each .list-group-item. As the images already repeat themselves, i just have to position them on the center of each anchor tag, and display certain pixel parts.
.list-group-item {
width:100%
height: 50px;
float: left;
overflow: hidden;
text-align:left;
background: url("Sprite.png") right no-repeat;
}
.one { top:0; left:-15px;}
I also tried adding images explicitly, like this:
<div class="list-group">
ONE<span class="img"></span>
TWO<span class="img"></span>
<span class="list-group-item three">Follow <span class="fb"><!--display FB icon--></span>/span>
</div>
How can I get it to work?
I don't know exactly what you want to achieve but I supposed that is something like this:
.img{
float:right;
display:inline-block;
height: 44px; /*Defines the height portion of the image we want to use*/
background: url('http://www.w3schools.com/css/img_navsprites.gif') 0 0;
}
#one{
width: 46px; /*Defines the width portion of the image we want to use*/
background-position: 0 0; /*Defines the background position (left 0px, top 0px)*/
}
#two{
width: 43px;
background-position: -47px 0; /*Defines the background position 47px to the right (#one width 46px + 1px line divider)*/
}
#three{
width: 43px;
background-position: -91px 0; /*Defines the background position 91px to the right (#home width 46px + 1px line divider + #two width 43px + 1px line divider )*/
}
.list-group-item{
overflow: hidden;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div style="margin-bottom: 50px; text-align:center">
Lets use this image:
<img src="http://www.w3schools.com/css/img_navsprites.gif" alt="">
</div>
<div class="list-group">
ONE<span id="one" class="img"></span>
TWO<span id="two" class="img"></span>
THREE<span id="three" class="img"></span>
</div>
So you have to move your background position to change the portion of the image you want to see.
Here the full example
Anyway I really recommend you use a CSS Sprite Generator.
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;
}