Tips (Total 8)
# Tips-1) What is HTML Background Images
A background image can be specified for almost any HTML element.
To add a background image on an HTML element, use the HTML style attribute and the CSS background-image property:
Full Example of HTML Background Images
Add a background image on a HTML element:
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h2>Background Image</h2>
<p>A background image for a p element:</p>
<p style="background-image: url('https://itupto.com/uploads/demo/2023-09-09-07-19-13-1.jpg');">
You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a p element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.
</p>
</body>
</html>
Output should be:
# Tips-2) How to create Background Image with HTML Style
To add a background image on an HTML element, use the HTML style attribute and the CSS background-image property:
Full Example of Background Image with HTML Style
Add a background image on a HTML element:
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h2>Background Image</h2>
<p>A background image for a p element:</p>
<p style="background-image: url('https://itupto.com/uploads/images/2023-09-09-07-19-13-1.jpg');">
You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a p element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.
</p>
</body>
</html>
Output should be:
# Tips-3) How to create Background Image with CSS Style
You can also specify the background image in the <style> element, in the <head> sectio
Full Example of Background Image with HTML CSS Style
Specify the background image in the <style> element:
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-image: url('https://itupto.com/avatar.png');
}
</style>
</head>
<body>
<h2>Background Image</h2>
<p>You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a div element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.</p>
</body>
</html>
Output should be:
# Tips-4) How to add HTML Background Image on Full Page
If you want the entire page to have a background image, you must specify the background image on the <body> element:
Full Example of HTML Background Image on Full Page
Add a background image for the entire page:
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://itupto.com/uploads/demo/2023-09-09-13-56-16-untitled.png');
}
</style>
</head>
<body>
<h2>Background Image</h2>
<p>By default, the background image will repeat itself if it is smaller than the element where it is specified, in this case the body element.</p>
</body>
</html>
Output should be:
# Tips-5) How to create HTML Background Repeat
If the background image is smaller than the element, the image will repeat itself, horizontally and vertically, until it reaches the end of the element:
Full Example of HTML Background Repeat
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://itupto.com/avatar.png');
}
</style>
</head>
<body>
<h2>Background Repeat</h2>
<p>By default, the background image will repeat itself if it is smaller than the element where it is specified, in this case the body element.</p>
</body>
</html>
Output should be:
# Tips-6) How to create HTML Background with no Repeat
To avoid the background image from repeating itself, set the background-repeat property to no-repeat.
Full Example of HTML Background with no Repeat
Add following line on existence CSS background-repeat: no-repeat;
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://itupto.com/avatar.png');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Background No Repeat</h2>
<p>You can avoid the image from being repeated by setting the background-repeat property to "no-repeat".</p>
</body>
</html>
Output should be:
# Tips-7) How to add HTML Background Cover with CSS
If you want the background image to cover the entire element, you can set the background-size property to cover.
Also, to make sure the entire element is always covered, set the background-attachment property to fixed:
Full Example of HTML Background Cover with CSS
HTML Background Cover with CSS
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://itupto.com/uploads/demo/2023-09-09-14-46-00-untitled.jpeg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
</head>
<body>
<h2>Background Cover</h2>
<p>Set the background-size property to "cover" and the background image will cover the entire element, in this case the body element.</p>
</body>
</html>
Output should be:
# Tips-8) How to create HTML Background Stretch
If you want the background image to stretch to fit the entire element, you can set the background-size property to 100% 100%:
Full Example of HTML Background Stretch
Try resizing the browser window, and you will see that the image will stretch, but always cover the entire element.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://itupto.com/uploads/demo/2023-09-09-14-46-00-untitled.jpeg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
</head>
<body>
<h2>Background Stretch</h2>
<p>Set the background-size property to "100% 100%" and the background image will be stretched to cover the entire element, in this case the body element.</p>
</body>
</html>
Output should be:
