Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Create Wave Image for a Background using HTML and CSS
Overview
To build the wave image background, here the main role play is of Cascading Styles Sheet (CSS) as without any use of svg or png image we will be going to create a wave image background that can be used for the web pages background. So to build this component you should have a good understanding of CSS as to build this component we are going to use the CSS position property and the before and after selector. So using these properties and selector we can achieve the deployment of the wave image background.
Algorithm
Step 1 − Create a HTML file in a text editor and add a HTML boilerplate in it.
Step 2 − Now create two div containers in the body tag. The first container contains the wave image background and the other second container contains the main content of the web page.
<div id="waves"> </div> <div class="main"> <p>tutorialspoint.com</p> </div>
Step 3 − Now create a style.css file in the same folder and link the style.css file to the HTML document.
<link rel="stylesheet" href="style.css">
Step 4 − Now target the wave container and style it.
#waves {
position: relative;
height: 70px;
width: 100%;
background: green;
transform: scale(1, 1);
z-index: 1;
}
Step 5 − Now use the ‘:before’ CSS selector to build the shape of the wave before the content.
#waves:before {
content: "";
position: absolute;
border-radius: 100%;
width: 100%;
height: 18rem;
background-color: rgb(233, 246, 252);
right: -35%;
top: 30px;
}
Step 6 − Now use the ‘:after’ CSS selector to build the shape of the wave after the content.
#waves:after {
content: "";
position: absolute;
border-radius: 100%;
width: 100%;
height: 18rem;
background-color: green;
left: -30%;
top: -185px;
}
Step 7 − Target the main container and make its position fixed with respect to the waves container.
.main{
z-index: 999;
position: fixed;
width: 100%;
height: 100vh;
text-align: center;
color: green;
font-weight: 900;
font-size: 5vw;
font-family: 'Segoe UI';
top: 1;
}
p{
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
Step 8 − The wave image background is ready.
Example
In this example we will be creating the wave image background which is used in the web pages. So for this we have created two files as index.html and style.css. The HTML file contains the container which contains the css customized background image and the main content parent container.
<html>
<head>
<title>Wave Background using CSS</title>
<link rel="stylesheet" href="style.css">
<style>
body {
overflow: hidden;
margin: 0;
padding: 0;
background-color: rgb(233, 246, 252);
}
#waves {
position: relative;
height: 70px;
width: 100%;
background: green;
transform: scale(1, 1);
z-index: 1;
}
#waves:before {
content: "";
position: absolute;
border-radius: 100%;
width: 100%;
height: 18rem;
background-color: rgb(233, 246, 252);
right: -35%;
top: 30px;
}
#waves:after {
content: "";
position: absolute;
border-radius: 100%;
width: 100%;
height: 18rem;
background-color: green;
left: -30%;
top: -185px;
}
.main{
z-index: 999;
position: fixed;
width: 100%;
height: 100vh;
text-align: center;
color: green;
font-weight: 900;
font-size: 5vw;
font-family: 'Segoe UI';
top: 1;
}
p{
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<div id="waves">
</div>
<div class="main">
<p>tutorialspoint.com</p>
</div>
</body>
</html>
The given image below shows the output of the above, in which the background used in the page is not any type of image, it is the customized wave image background. Now we can use this background in any section of the web pages.
Conclusion
In the above example we have created a simple and basic type of wave image background, so we can customize the background and can build with a new customized background. Sometimes the images do not provide a good interface to the application so the developers can customize their own background which can make the user interface with a new look. In the above example we have also created the second main container, so it is needed to make that container as fixed because it acts as an overlay on the background container with the height and width of 100% and transparent background. The above wave image background which we have created is responsive in nature.
2K+ Views
