This question already has answers here:
Semi-transparent color layer over background-image?
(19 answers)
Closed 3 years ago.
I am certainly new to Web design.
As seen in this picture, most of the websites I see have this kind of mask over images, and then text over that mask.
So how do I achieve that if I don't edit the picture that way, and want to add the mask over it.
I am using a Bootstrap Jumbotron for the header part of website, with container-fluid property and it's height set at 100vh.
I use an image as background image to the jumbotron. It's really a common thing and can be seen in many websites. For example:
So how do I add a mask or an overlay to the background image, certainly a black tint, so that I can make white text visible.
P.S.
I am very new to css, and I came to know about these mask and overlay properties today itself.
You could nest two blocks together, one with the background image, and the other with the overlay :
.background{
width: 500px;
height: 500px;
background: url('https://static1.squarespace.com/static/56be46d2a3360cae707270a0/t/5772ef9b20099e38818859b0/1467150245253/');
background-size: cover;
}
.overlay{
width: 500px;
height: 500px;
background-color: rgba(0, 0, 0, 0.5);
}
<div class="background">
<div class="overlay">
<!-- Content here -->
</div>
</div>
The opacity of the overlay can be modified with the last argument of the rgba() function.
Try to use linear gradient:
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../some-image.jpg");
For more info check this link: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
Related
This question already has answers here:
Shape with a slanted side (responsive)
(3 answers)
Closed 1 year ago.
I wanna make this shape ( the black color one, on the left side ) : https://www.awesomescreenshot.com/image/10535419?key=066637f6e5d498e80eb0bdee9eee8372
My idea is to create a triangle down shape and scale it, then use transform:translate() to move the shape. Is there any better or easier way to got this shape?
Use clip-path this website is a great tool to help you get the hang of it, in your case you would need something like this
.shape {
width : 250px;
height : 400px;
background-color : #1a1a1a;
clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
}
<div class="shape">
</div>
I am trying to replicate the header image background from the following site: http://vistachurchslo.com/sundays/what-to-expect
Each page has a header with a background image. Regardless of the size/aspect/orientation of the browser window there is ALWAYS white-space (a blank horizontal area) below the background image. The image is always filling the browser window (except for the bar below it). The page text is not visible until you scroll/swipe down.
Can this be done with plain CSS, or do I need javascript as well? I would really appreciate any help figuring this out.
Image attached to help see the effect.
THANKS!
The "white-space below the background image" isn't just a bar. That's the next section tag coming in. If you look at the css of that section:
background-image: linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url("https://uploads-ssl.webflow.com/571fb2df2ab0dfe37255621b/59d667e68849c400014a5c31_outside-vets2-hd.jpg");
background-position: 0px 0px, 50% 50%;
background-size: auto, cover;
background-repeat: repeat, repeat;
background-attachment: scroll, fixed;
height: 90%;
So they set the background to be the image, set the size of it to cover the section, and then set the height of the section to be 90%. This means that 10% of the next section will be visible, which is the "white-space" that you're seeing.
As for the scrolling, this is simple screen-wipe. I found Scrollmagic really useful for that when I was beginning. It allows you to add a "scene" for each tag you choose (in this case, the sections") and then add a pin to achieve that screenwipe effect. Here's a demo.
I am having issues with web design as image compression is an important factor, I have taken the photography for the website myself and opted to add a vertical gradient on the image banner which fades to transparency (in image post-processing). The issue is that in order to show the transparency I'm having to save the file as a type .png, but with png compression I am only able to get the image down to 1.5mb, which is not ideal at all...The only work around I can think would be to implement the fade on the image in CSS, but I need something thats browser compatible (exceptions for IE..). I haven't been able to find anything for this. Is there any CSS styling anyone knows of to accomplish this so that I can save the image as a jpeg. The desired outcome is below:
You can use a div, place it over the image and give it a gradient:
<img src="image.jpg" alt="" />
<div class="gradient"></div>
CSS:
.gradient {
background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255));
height: 200px;
margin-top: -200px;
position: relative;
width: 600px;
}
Live preview: JSFiddle
i have been 'google'ing for a few days to find out if it is possible to overlay multiple images (i.e. roof.png , walls.png) and then dynamically apply overlay colors to them (depending on the user's click on colors).
I solved the first part to colorize the roof but it gets complicated (impossible?) when I add the second layer, the walls. The 'roof.png' is 'above' the 'walls.png' and the color effect is not visible.
What I want to achieve is a coloring scheme like here but not with separate images for all the colors (i.e. roof_blue.png , roof_red.png) but with css rules for the transparent roof.png.
Any suggestion is highly appreciated.
EDITED :
I will try to be more specific so you can concentrate on the solution (if there is one...)
Here is my HTML part :
<div class="row">
<div class="col-lg-12">
<div class="visualisation_area">
</div>
<div class="buttons_area">
</div>
</div>
</div>
And here is the CSS :
.visualisation_area {
width: 100%;
height: 600px;
background-image: linear-gradient(to right, rgba(0, 0, 255, 0.5), rgba(0, 0, 255, 0.5)),
url(../images/roof_blank.png),
linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0.5)),
url(../images/walls_blank.png);
background-repeat: no-repeat,
no-repeat,
no-repeat,
no-repeat;
background-position: right,
center,
right,
center;
}
The result can be seen HERE
What I'm curious about is if there is a way to apply the 'blue' and 'red' gradients SEPARATELY to the roof_blank.png and walls_blank.png respectively so the colors don't mix but the roof gets blue and the walls red for example?
I have tried several combinations with divs and images but without some guidelines I'm going nowhere from this point... Thank you in advance!
You can use CCS Sprites instead of multiple files
You can try to create divs with complex shapes
I'd like to create a simple visual effect for display of rows of data on iPhone/Android/etc, as seen in this example.
The effect is very simple; it's two rectangles on top of each other, the top one lighter than the bottom one and with a lighter-yet border-top. This does it:
<style>
.rowtop { background-color: #333; border-top: 1px solid #ccc; height: 25px; }
.rowbottom { background-color: #000; height: 25px; }
</style>
<div class="row">
<div class="rowtop"> </div>
<div class="rowbottom"> </div>
</div>
Now I'd like to be able to place text and labels on top of this, again as seen in the example. That's where I need help.
I'd like to place the text relative to "row", but row is actually made up of two divs, so it's complicated. The text has to live on top of the "rowtop" and "rowbottom" divs.
I tried messing around with a third div for the labels and setting its z-index but couldn't get it to do what I wanted.
I think I can use a background image instead of rowtop and rowbottom and make it easy on myself, but I was wondering if anyone has a clever non-image based solution.
[Update] Based on edeverett's answer I tried css gradients and they worked great:
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgb(50, 50, 50)), color-stop(50%, rgb(0, 0, 0)));
If you are just targeting mobile browsers you should be able to get that effect using CSS gradients instead of a background image.
As a side note, I think you shouldn't be making this effect by adding extra divs. You should try to keep content and presentation separate in case you (or your users) decide to present it differently in the future. So if CSS gradients don't work for you I'd recommend the background image approach (look at using data-URIs if you want to do something 'fun' and to reduce HTTP requests).