How to use the HTML style attribute In HTML
In this method, we will add a background image using the HTML style attribute for a particular element in the webpage.
Syntax:
<div style="background-image: url('img.jpg');"></div>
Example: In this example we can see that there is no background image for the heading âWelcome to w3wikiâ, but we have a background image for the div containing paragraphs.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Background Image</title>
</head>
<body>
<h3 style="color: green; text-align: center;">
Welcome to w3wiki
</h3>
<div style="background-image: url(
'https://media.w3wiki.org/wp-content/cdn-uploads/20210203170945/HTML-Tutorials.png');">
<p>A Computer Science portal for geeks.</p>
<p>A Computer Science portal for geeks.</p>
<p>A Computer Science portal for geeks.</p>
<p>A Computer Science portal for geeks.</p>
<p>A Computer Science portal for geeks.</p>
<p>A Computer Science portal for geeks.</p>
<p>A Computer Science portal for geeks.</p>
<p>A Computer Science portal for geeks.</p>
<p>A Computer Science portal for geeks.</p>
<p>A Computer Science portal for geeks.</p>
<p>A Computer Science portal for geeks.</p>
<p>A Computer Science portal for geeks.</p>
</div>
</body>
</html>
Output:
Background Repeat
In HTML, if the image is small in size as compared to the element then the image repeats itself horizontally and vertically. It repeats until it reaches the end of the element. If you donât want to repeat the image then set the value of background-repeat property to no-repeat. Let us discuss this concept with the help of an example:
Syntax:
background-repeat: no-repeat;
Example: Implementation of Background Repeat property.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Background Image</title>
</head>
<body background=
"https://media.w3wiki.org/wp-content/cdn-uploads/20210203170945/HTML-Tutorials.png"
style="background-repeat: no-repeat;">
<h1 style="color: green;
text-align: center;">
Welcome to w3wiki
</h1>
</body>
</html>
Output:
HTML Background Images Example Output
HTML Background Images
HTML background images are graphics applied to the background of HTML elements, often used in webpage design for aesthetic or branding purposes. Theyâre set using CSS background-image property, allowing for single or repeating images, gradients, or patterns to enhance visual appeal.
Contact Us