How to Set HTML Background
We can set the HTML Background in different ways for designing the webpage, It can be used to change the variations of colors and background images to the page, also we can also adjust the positioning of the HTML page by using cascading style sheet properties in HTML or by using properties of HTML tags.
Now we will look at the HTML Background properties one by one with suitable Examples.
1. Using HTML Background Colors
The <bgcolor> Attribute in HTML is used to set the background color of the HTML element mainly in the webpages and the table body, but the CSS property is used with the <style> Attribute nowadays for color styling of the background.
Syntax
<tag bgcolor = “color_value”>
There are three types of color value :
- rgb(red, green, and blue) which defines the strength of the color with a value between 0 and 255.
- rrggbbrr (red), gg (green), and bb (blue) which defines the hexadecimal values between 00 and ff.
- hsl(hue, saturation, lightness) which defines the hue value between 0 and 360 for different colors and percentage values between 0 to 100 for saturation and lightness.
Example using bgcolor Attribute in HTML Background.
<!DOCTYPE html> <html> <head> <title> Bg-color Attribute in HTML Background </title> </head> <body bgcolor="maroon"> <center> <h1> Codedec</h1> <br> <br> <center> <p> Codedec, is a site focused on many programming tools and technologies for everyone who wants to learn to program and software development. At Codedec, You will find useful tutorials from scratch that will be helpful from a beginner level as well as for working professionals. We are providing easy tutorials for computer programming languages and problem-solving algorithms for real-time practice. Free notes for students as well as video tutorials with examples for practice which will be easy to understand. </p> </center> </body> </html>
OUTPUT:
Example using CSS property with <style> Attribute in HTML Color Background.
<html> <head> </head> <body style="background-color:yellow;"> <center> <h1> CODEDEC</h1> <p>Codedec, is a site focused on many programming tools and technologies for everyone who wants to learn to program and software development. At Codedec, You will find useful tutorials from scratch that will be helpful from a beginner level as well as for working professionals. We are providing easy tutorials for computer programming languages and problem-solving algorithms for real-time practice. Free notes for students as well as video tutorials with examples for practice which will be easy to understand.</p> </body> </html>
OUTPUT:
2. Using HTML Background Images
The <backgroud> Attribute in HTML is used to set the background image in HTML element of the webpage. It can be passed as the value for the path of the image in the HTML background, we can also use CSS property to add images to the background of the HTML document.
Syntax
<tag background = “Image path”>
Example using backround Attribute in HTML Background image.
<html> <head> <title> Example of Background image </title> </head> <body background="/home/aman/Downloads/amanpic.jpeg"> <font color="yellow"> <h1> codedec website for learning </h1> <font color="black"> <p> <a href="https://codedec.com/"> link </a> For the Website </p> </font> </body> </html>
OUTPUT:
Example using CSS property with <style> Attribute in HTML Background for repeat Images.
<!DOCTYPE html> <html> <head> <style> body { background-image: url('/home/aman/Desktop/frames/codedeclogo.png'); } </style> </head> <body> <h1>Background Repeat</h1> <p> example of style attribute with repeat image in HTML background</p> </body> </html>
OUTPUT:
3. Using HTML Background Positioning
The background-position Attribute is used to set the background image size and fonts in a certain position on the webpage in percentage and pixel values.
Example of HTML Background using background-position Attribute in percent (%) value.
<!DOCTYPE html> <html> <head> <div style="background-image: url(/home/aman/Desktop/frames/codedeclogo.png); background-repeat:no-repeat; background-position: 50% 50%; border:2px solid #CD5C5C; width:350px; height:300px"> EXAMPLE OF BACKGROUND IMAGE USING POSTION !! WELCOME TO OUR WEBSITE </div> </body> </html>
OUTPUT: