All About Background.
Hey guys!!!
Hope you all are doing good. Sometimes simple background doesn't look good. So to make it more happening, I'm sharing some views that may be helpful for you guys.
Today I'm gonna show you :
- How to apply gradient in background?
- How to apply an image in background?
- How to fix background with CSS?
- How to reduce the opacity of background?
- How to blur background?
- How to put video in Background?
1. How to apply gradient in background?
All you have to do is just put two different colors in background. If you don't want your background to scroll, then put overflow hidden.
IN HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>SmallShots21</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Hello</h1>
</body>
</html>
h1 {
font-size: 5rem;
color: #fff;
text-align: center;
margin-top: 18rem;
}
body {
height: 100vh;
overflow: hidden;
background: linear-gradient(45deg,#2e2d69,#5bf5d3);
}
Output
2. How to apply an image in background?
If your requirement is to put image in background, then put URL of the image that you want to display.
IN HTML
Use same HTML as above.
Now IN CSS
body {
height: 100vh;
overflow: hidden;
background-image: url(https://images.all-free-download.com/
images/wallpapers_large/purple_colorful_8155.jpg);
}
OUTPUT
Now if you notice that background image is repeating multiple times. But according to your requirement, it should display only one time, then put this css along with background image.
background-size: cover;
/* or you can use */
background-size: contain;
OUTPUT
3. How to fix background with CSS?
Now if you have a decent background and you want to prevent background from scrolling.
Then all you have to do is just add a little line in your CSS class.
Before
SO as you can see the background is also scrolling along with content. So to stop this, use these lines of code in your CSS file.
body{
background-image: url(https://i.pinimg.com/originals/4c/fd/b7/4cfdb769aa9ecb99413722f64e4ba144.jpg);
background-size: cover;
background-attachment: fixed;
}
p{
font-size: 19px;
color: white;
padding: 0 5rem ;
}
When you add this key property then your background sticks to its place.
4. How to reduce the opacity of background?
There are many cases when fellas asked about reducing background opacity.
So here is the solution.
IN HTML
<body>
<div class="image"></div>
<h1 class="big-font"> Hello World</h1>
</body>
In CSS
.image {
background-image: url(https://wallpapercave.com/wp/wp2037797.jpg);
background-position: center;
background-size: contain;
position: fixed;
height: 100vh;
left: 0;
right: 0;
top: 0;
opacity: 0.4;
z-index: -1;
}
.big-font {
font-size: 8rem;
text-align: center;
margin-top: 15rem;
}
OUTPUT
5. How to blur background?
Sometime you may want to blur the background. Then use HTML and CSS of above section, the just add this little CSS property
filter: blur(5px);
6. How to put video in Background?
Many times designers want to put videos in the background. So this one is for you.
IN CSS
body {
margin: 0;
}
.video-view {
width: 100%;
height: 100vh;
object-fit: cover;
position: absolute;
top: 0;
z-index: -1;
}
.big-font {
color: rgb(0, 0, 0);
text-align: center;
margin-top: 12rem;
font-size: 10rem;
}
In HTML
<body>
<video src="./vid.mp4" muted loop autoplay class="video-view"></video>
<h1 class="big-font">hello</h1>
</body>
OutPUT
So this is all about background. Hope you find it helpful. If you have any query regarding this blog or still confused in any part of these sections then connect with me on
ask your query and I will try to resolve your query.
subscribe to my channel.
Thanks for reading.
#SmallShots21🍻
Such a very good blog.
ReplyDeleteSometimes I confused about background how to choose and apply but this blogs helps me alot in learning.
It is very useful for me and the video part is very helpful .....🤩🤩
ReplyDelete