Background Images
Bookmarks made with HTML (Background Images)links allow users to navigate to particular sections of a website.
Background Image on a HTML element
Use the CSS background-image property and the HTML style tag to add a background picture to an HTML element:
Example
Add a background image on a HTML element:
<p style="background-image: url('img_boy.jpg');">
Additionally, you may set the background image in the <head> part of the <style> element:
Example
Specify the background image in the <style> element:
<style>
p {
background-image: url('img_boy.jpg');
}
</style>
Background Image on a Page
You must supply the background image on the <body> element if you want it to appear on the entire page:
Example
Add a background image for the entire page:
<style>
body {
background-image: url('img_boy.jpg');
}
</style>
Background Repeat
The picture will repeat both horizontally and vertically if the background image is smaller than the element until it reaches the end of the element:
Example
<style>
body {
background-image: url('example_img_boy.jpg');
}
</style>
Set the background-repeat property to no-repeat to prevent the background picture from repeating.
Example
<style>
body {
background-image: url('example_img_boy.jpg');
background-repeat: no-repeat;
}
</style>
Background Cover
You can set the background-size property to cover if you want the background picture to fill the entire element.
Additionally, set the background-attachment attribute to fixed to guarantee that the element is always covered in its entirety:
In this manner, the background picture will completely enclose the element and won’t be stretched; instead, it will maintain its original dimensions:
Example
<style>
body {
background-image: url('img_boy.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
Background Stretch
You can set the background-size property to 100% 100% to have the background image stretch to fill the element completely:
You can see that the image stretches as you resize the browser window, yet it always covers the full element.
Example
<style>
body {
background-image: url('img_boy.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
Background Images
HTML element
CSS background-image
background repeat
background cover
background stretch
HTML links
navigation
website sections
HTML
HTML5
HTML tutorials
Learn HTML
Free HTML tutorials
HTML Example
HTML Explained
background image, HTML element, CSS background-image, background repeat, background cover, background stretch, HTML links, navigation, website sections
—
Adding background images in HTML is a simple yet powerful way to enhance the visual appeal of your web pages. The HTML “ element provides the canvas for the background, allowing you to set an image that spans the entire page.
To add a background image, you can use the CSS `background-image` property. This property accepts a URL that points to the image file you want to use. For example:
“`css
body {
background-image: url(‘path/to/image.jpg’);
}
“`
You can also control how the background image is displayed using additional CSS properties such as `background-repeat`, `background-size`, and `background-position`. These allow you to repeat the image, stretch it to cover the entire background, or position it in a specific location.
Background images are not just limited to the “ element. You can also apply them to other HTML elements, such as `
` tags, to create distinct sections or navigation areas on your website. This can be particularly useful for creating visually striking headers, footers, or sidebar components.
By leveraging background images in your HTML and CSS, you can elevate the overall aesthetic of your web pages and provide a more engaging user experience for your visitors.
Background images are a powerful tool in web design, allowing you to add visual interest and context to your web pages. In HTML, you can use the “ element to insert an image as the background for your content.
The CSS `background-image` property is used to specify the image file that should be used as the background. You can also control how the background image is displayed using additional CSS properties like `background-repeat`, `background-size`, and `background-position`.
For example, setting `background-repeat: no-repeat` will ensure the image is only displayed once, while `background-size: cover` will make the image fill the entire background area. Experimenting with these properties can help you achieve the desired look and feel for your web pages.
Background images are often used to create visual hierarchy and draw the user’s attention to key sections of a website, such as the header or navigation menu. By strategically placing background images, you can enhance the overall aesthetic and usability of your web design.
