Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create Wave Background Using CSS
To create wave background using CSS, is a popular technique used to add a unique and dynamic visual element to web pages. We will be understanding two different approaches to create wave background using CSS.
In this article, we are having a blank webpage and our task is to create wave background using CSS.
Approaches to Create Wave Background
Here is a list of approaches to create wave background using CSS which we will be discussing in this article with stepwise explaination and complete example codes.
Wave Background Using SVG
To create wave background using CSS, we have used SVG (Scalable Vector Graphics). It is used to draw two dimentional vector images.
- We have used a div container to wrap the SVG element and div element. The viewBox attribute sets a viewport 600px wide and 200px in height.
- The path tag is used to define the path of the curve for creating the wave using d attribute. Values of d attribute used are: M defines the drawing point, C uses three points to draw a cubic Bezier curve and L creates a line to create a close shape by drawing lines to top corner.
- We have used SVG fill attribute to change the wave color to green color.
- We have used body as element selector to eliminate any extra space by setting the margin and padding to 0. We have used overflow property which prevents from scrolling.
- We have used text class selector to style the text. We have used position property to position the text on wavy background. We have set the width, font-size, text color, top position and font-family of the text and centered the text using text-align.
Example
Here is a complete example code implementing above mentioned steps to create wave background using SVG.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
body {
overflow: hidden;
margin: 0;
padding: 0;
}
.text {
position: absolute;
top: 10%;
width: 100%;
text-align: center;
font-size: 1.5em;
color: white;
font-family: Verdana, sans-serif;
}
</style>
</head>
<body>
<div class="container">
<svg viewBox="0 0 600 200">
<path d="M 0,100 C 100,200 200,0 300,100
C 400,200 500,0 600,100 L 600,0 L 0,0"
fill="#04af2f">
</path>
</svg>
<div class="text">
Welcome to TutorialsPoint
</div>
</div>
</body>
</html>
Wave Background Using background Property
In this approach to create wave background using CSS, we have used CSS background property.
- We have used a div with class wave for inserting wave background and a div with class text for textual content.
- We have set the height and margin for HTML document using html and body element selector. We have set the width and position of the div container.
- The wave class is responsible for the wave background and its styling. We have used url() function with background property to set the wave background. We have set the height, width and position of the wave.
- To avoid repeating of wave background, we have used background-repeat property and used background-size property to cover the container. We have used rotate() function of transform property to rotate the wave upside down.
- We have used text class to style the text. We have set the font-family, font-size, position and width of the text area. We have used text-align property to center the text and transform property to display the text normally.
Example
Here is a complete example code implementing above mentioned steps to create wave background using CSS background property.
<!DOCTYPE html>
<html>
<head>
<title>CSS Waves Using background Property</title>
<style>
html, body {
height: 100%;
margin: 0;
overflow: hidden;
}
.container {
position: relative;
width: 100%;
}
.wave {
background: url(/https/www.tutorialspoint.com/assets/questions/media/1269191-1731394805.jpg);
position: absolute;
width: 100%;
height: 300px;
top: 0;
background-repeat: no-repeat;
background-size: cover;
transform: rotate(180deg);
}
.text {
transform: rotate(180deg);
text-align: center;
font-family: Verdana, sans-serif;
font-size: 1.5em;
position: absolute;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="wave">
<div class="text">Welcome to TutorialsPoint</div>
</div>
</div>
</body>
</html>
Output
Conclusion
In this article, we learnt and understood two different approaches to create wave background using CSS. Here, we are using two different approaches which are: by using SVG and by using CSS background property.
4K+ Views
