I for background on my website I use colors and at top I have an image.
I want to make this image black and white with css:
body {
background: url('background.jpg') center top no-repeat;
-webkit-filter: grayscale(100%);
}
but this code make whole site grayscale
I also tried to put site content to new div with style -webkit-filter: none; but it don't work neither.
There's another solution without using an overlay div using background-blend-mode.
This is supported among all major browsers https://caniuse.com/?search=background-blend-mode (except IE)
background-color: rgba(255,255,255,1);
background: url('background.jpg') center top no-repeat;
background-blend-mode: luminosity;
you can try a different div overlayed over <body>
like this
#overlay {
background: url('background.jpg') center top no-repeat;
-webkit-filter: grayscale(100%);
z-index: -1;
opacity: 0.5; /*make it as your requirement*/
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
and your html will look like
<body>
<div id="overlay"></div>
<!-- other body elements -->
</body>
This is block style in jsx syntax (from reactjs-application). I have no clue what is going on there, but it seems to work
style={{
minHeight: '100vh',
backgroundPosition: 'center',
backgroundSize: 'cover',
backgroundImage:"linear-gradient(black, black), url('images/bgimage.jpg')",
backgroundBlendMode: 'saturation'
}}
Related
I have a website with a hero video that is black and gold and a black dive underneath...
Click to see image
I would like to blur the bottom border of the video and or the top border of the black div so that they appear to 'bleed into each other'.
I have tried everything I can think of / find on the interweb, so... filter: blur, mask-image, backdrop-filter: blur. but nothing seems to do the trick. 'filter: blur' got the closest but I don't want the entire video blurred, just the bottom border.
Help would be greatly appreciated.
You could use a linear gradient on the div from black to transparent to create a fake "blur border" effect.
body {
margin: 0;
}
header {
position: relative;
}
.video {
width: 100%;
}
.myDiv {
position: absolute;
z-index: 1;
background-image: linear-gradient(to top, #000 95%, rgba(0,0,0,0));
height: 50vw;
width: 100%;
top: 20vw;
}
<header>
<img class="video" src="https://i.stack.imgur.com/5ktg0.png" alt="This is the video">
<div class="myDiv"></div>
</header>
Image added if I cannot describe it accurately or you want a more visual representation of what I'm trying to do.
I want to make an image stretch so that it covers almost halfway (can be more or less than half) down the page but it has a black overlay to make the text readable which is a linear gradient starting from the top as an overlay and ending with the image as black. Which then continues as a gradient (must not be the same continuous gradient, can be another element) from black to blue to green which matches my footer.
First, I tried to make an empty div for image and an empty div for the overlay, but it made me use too many position: absolute; So thought against using that.
&__img {
background-image: url(../images/eugene-chystiakov-YElySQuyUV4-unsplash.jpg);
height: 90vh;
width: 90vw;
background-size: cover;
background-position: 10%;
position: absolute;
left: 0;
}
&__overlay {
background-color: rgba(black, 0.7);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
then I used the background image on the body like this
body {
// to make background image stretch the whole page use it on body tag
background-image: url(../images/eugene-chystiakov-YElySQuyUV4-unsplash.jpg), linear-gradient(rgba(black, 0), rgba(black, 1));
// to make the gradient work use background attachment
background-attachment: fixed;
background-size: cover;
background-color: rgba(black, 0.7);
background-blend-mode: multiply;
background-position: center;
}
but now the image does not scroll with the page. If I remove background-attachment: fixed the image does scroll but the gradient stops at the 100vh height and keep repeating when scrolled. What should I do? I have attached an example image of what I'm trying to do.
This is the HTML used on the first attempt. The next CSS code did not require HTML markup as it was used on the body.
<section class="container">
<div class="container__img">
<!-- <img src="./images/eugene-chystiakov-YElySQuyUV4-unsplash.jpg" alt="" /> -->
<div class="container__overlay"></div>
</div>
<header class="container__header header">
<div class="header__text">
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="header__CTA">
Lorem
<a href="#" class="header__btn header__btn--secondary">Ipsum</a
>
</div>
</header>
...
...
...
</section>
If there is anything missing please say so and I will add that.
Edit: I realised that I do not 2 gradients one for overlay and one from transparent to black. I can just use one starting as an overlay and ending as black. But that did not solve the problem.
Edit 2: Added the HTML markup.
Edit 3: Tried removing background-attachment property.
here is what I'm trying to do.
The image is a placeholder from Unsplash.
If you want to have an overlay completely covering your section with a bg image you can define a pseudo-element :after or :before and give it a position: absolute and make sure to give position: relative to the parent section so pseudo-element will be staying inside the flow of the document.
.bg-black {
background-image: url(https://images.unsplash.com/photo-1616765118757-f5c165c30d93?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1482&q=80);
position: relative;
height: 90vh;
background-size: cover;
background-position: center center;
}
.bg-black:after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #00000070;
}
.footer {
padding: 15%;
background: rgb(11, 11, 11);
background: linear-gradient(180deg, rgba(11, 11, 11, 1) 0%, rgba(20, 55, 79, 1) 41%, rgba(48, 170, 255, 1) 100%);
}
<div class="bg-black">
</div>
<div class="footer"></div>
I want to create something like this for the top section of my one-page website.
repeating background image with a gradient
I have figured out how to repeat a background image, but I was wondering if there is a way I can specify opacity for each time the image gets repeated.
This is the CSS code I've used for the section:
section{
width: 100%;
float: left;
height: 100vh;
background-image: url("img/bgflower.jpg");
background-repeat: repeat-x;
background-size: contain;
}
Please suggest any methods I can use to achieve the same, thank you!
If you want to have true gradient instead of visible opacity regions, you can do something like my code below. Unfortunately this does not really apply opacity to your image and works only with one color (like in your example picture you have white).
#background {
/* place at the top of your page */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* set background image */
background: url(https://pyry.info/stackoverflow/flower.png);
background-repeat: repeat-x;
background-size: contain;
}
/* create the white gradient */
#gradientLayer {
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}
<!-- place this below everything else -->
<div id="background">
<div id="gradientLayer"></div>
</div>
I'm not sure if the section you made is responsive or if it sits within another container that has a fixed width. With the codes below, a fixed width will render a better result. However, I made something up in codepen to help you move along. https://codepen.io/jennift/pen/qBRJOYd?editors=1100. I've included some comments in the code below:
<section>
<div class="extended">
<div class="first">first</div>
<div class="second">second</div>
<div class="third">third</div>
<div class="fourth">4th</div>
</div>
</section>
section {
width: 100%;
height: 100vh;
background-image: url("https://placeimg.com/200/480/nature");
background-repeat: repeat-x;
background-size: contain;
}
/* again I'm not sure if you will use the same image bg. However, if you intend to change, remember to change the aspect ratio here as well so that the white layers on top will lay somewhat nicely aligned with the bg */
:root {
--aspectratio: 0.416; /* divide bg image width with bg image height of bg image > 200 / 480 */
}
.extended { /*this extends the container box so the divs stays in a row instead of breaking into a new line as the screen gets resized to something smaller */
width:500%;
height: 100vh;
overflow:hidden;
}
.first, .second, .third, .fourth {
background-color: #fff;
height: 100vh;
float: left;
width: calc(100vh * var(--aspectratio)); /*using the aspect ratio, you can then calculate the width of each white section
}
.first {
opacity:0;
}
.second {
opacity: 0.3;
}
.third {
opacity: 0.6;
}
.fourth {
opacity: 0.9;
}
With the codes above, if your section gets wider than this, you probably need to put in a fifth div, and probably javascript will be easier solution to auto-create divs as the screen gets wider/smaller. But if your width is fixed, this way works well.
I've looked at several SO posts about this: I want to darken the current background image by adding an overlay.
#header1 {
background: url("http://lorempixel.com/image_output/cats-q-c-640-480-10.jpg");
background-position:center center;
position: relative;
background-size: cover;
padding-bottom:5em;
}
.overlay {
background-color: rgba(0, 0, 0, 0.7);
top: 0;
left: 0;
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}
<div class="header">
<div class="overlay">
<div class="jumbotron" id="header1">
<h1>Hello</h1>
</div>
</div>
</div>
Maybe I'm not understanding how to use z-index, or maybe I'm missing something here. The darker background used for tinting isn't showing up. Any pointers?
Use Linear gradient
to darken the background refer to this codepen and this link
<div class="bg-img"></div>
.bg-img {
width: 100%;
height: 100%;
background: url('http://alexcarpenter.me/img/banner.jpg') center center no-repeat;
background-size: cover;
&:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to bottom right,#002f4b,#dc4225);
opacity: .6;
}
}
#header1 {
background: url("https://www.random.org/analysis/randbitmap-rdo.png");/*Random image I grabbed*/
background-size: cover;
}
h1 {
color: white;
background-color: rgba(0, 0, 0, 0.7);
padding-top: 10px;
padding-bottom: 100px;
padding-left: 20px;
padding-right: 20px;
}
<div class="header">
<div class="overlay">
<div class="jumbotron" id="header1">
<h1>Hello</h1>
</div>
</div>
</div>
As intended the h1 acts as an extra visual layer and its padding covers the #header1.
A second solution would be to add the original background image to .header and have the styles from h1 given to #overlay and with a bit of tweaking that should also do the trick.
And yet another possible solution(similar to the second one) you can add the background-image to overlay and have the h1 styles from the example I gave to #header1 or .jumbotron
In addition to the first solution, you should be able to add extra layer by adding a background-color: to overlay. I'm not sure how it will effect the background exactly but from what I'm guessing it should just add an extra layer of color.
Here is a personal example where I used this technique.
Example
#header1 {
background: url("https://www.random.org/analysis/randbitmap-rdo.png");/*Random image I grabbed*/,
box-shadow: "0px 4px 4px 0px #00000040,inset 0 0 0 1000px rgba(0,0,0,.5)"
}
You don't need the overlay if you add a box shadow. The inner box-shadows work as an overlay. You can adjust the opacity by changing the .5 up or down.
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
for your answer, you can visit css-tricks
I guess you would like to completely hide the background image, Then you need to set the value of alpha to 1 in rgba(0,0,0,1)
0.7 defines the transparency level you need the particular element to be shown.
below link explain concept of overlaying with very good examples
http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/
You can also use this CSS:
filter: brightness(50%);
I'm trying to achieve the background effect on this website:
http://mountaintheme.com/themeforest/mountain/home.html
The background pictures seem to be covered in a dotted overlay sort of thing.
Is there a way to create this effect with CSS only?
A little bit late, but here is a solution that uses just CSS to create the dotted overlay using a pattern created with radial-gradient.
.image {
width: 800px;
height: 600px;
position: relative;
background: url('https://upload.wikimedia.org/wikipedia/commons/6/6e/Rathong_from_Zemathang2.jpg');
background-size: cover;
}
.image:after {
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(127, 127, 127, 0.5);
background-image: radial-gradient(black 33%, transparent 33%);
background-size: 2px 2px;
}
<div class="image"></div>
Here is my way of doing this https://jsfiddle.net/soumyabg/wefLyrhp/
Very minimal and pure CSS solution. The catch is that the actual image is the background of <a> tag (with display:block), and <img> is the dot overlay (its size should be defined in the CSS).
HTML:
<div class="image-container">
<a class="dotm" href="#">
<img src="http://s14.directupload.net/images/111129/44ga9qid.png" alt="dotm" title="dotm" class="dotm-overlay">
</a>
</div>
CSS:
.dotm {
display: block;
background: url(https://media.giphy.com/media/SOoaHiWfwZyfu/giphy.gif) no-repeat; /* change with the image URL */
background-size: cover;
}
.dotm-overlay {
background: url(http://s14.directupload.net/images/111129/44ga9qid.png);
width: 100%;
height: 400px; /*height of the image*/
}
Output:
You can implement this using only css background properties:
background-image: radial-gradient(black 50%, transparent 50%);
background-size: 4px 4px;
Here's one way of doing it.
<body>
<div id="overlay">
image
</div>
<div id="page">
<div id="content">
....
Basically, you add a container outside your page container.
Add a fixed position for it, and add a pseudo element :after to it and give it a background image.
Assume you have an object with "bg" id, this css class will add small dotted background:
#bg {
background-image: radial-gradient(#000 10%, transparent 10%);
background-size: 15px 15px;
background-color: #EEE;
}
You can change dots color by replace black (#000) with any color, and background color by replacing #EEE.
To adjust dots size, play with 10% and 15px.