Toggle HTML CSS JavaScript

HTML Tutorials

HTML Introduction HTML Headings HTML Paragraphs HTML Formatting HTML Links  
HTML Images  
HTML Tables  
HTML Lists  
HTML Block & Inline HTML Classes HTML Id HTML Iframes HTML JavScript HTML File Paths HTML Head HTML Layout HTML Responsive

HTML Background Images

A background image can be specified for almost any HTML element.

Bacground Imagage on a HTML element

To add a background image on an HTML element, use the HTML style attribute and the CSS background-image property:

Example:

Add a background image on a HTML element:

<p style="background-image: url('img.jpg');"
Try it Yourself 

You can also specify the background image in the <style> element, in the <head> section:

Example:

Specify the background image in the <style> element:

<style>
p {
    bacground-image: url('img.jpg');
}
</style>
Try it Yourself 

If you want the entire page to have a background image, you must specify the background image on the <body> element:

Example:

Add a background image for the entire page:

<style>
body {
    background-image: url('img.jpg');
}
</style>
Try it Yourself 

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:

Example:

Note: ".tom_on_repeat" is a class for div element.

<style>
.tom_on_repeat {
    background-image: url('tom.jpg');
    height: 52vh; }
</style>
Try it Yourself 

To avoid the background image from repeating itself, set the background-repeat property to no-repeat.

Example:

<style>
.tom_on_repeat {
    background-image: url('tom.jpg');
    height: 52vh;
    background-repeat: no-repeat; }
</style>
Try it Yourself 

Background Cover

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;
This way, the background image will cover the entire element, with no stretching (the image will keep its original proportions):

Example:

<style>
.tom_on_repeat {
    background-image: url('tom.jpg');
    height: 52vh;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
</style>
Try it Yourself 

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%:

Try resizing the browser window, and you will see that the image will stretch, but always cover the entire element.

Example:

<style>
body {
    background-image: url('tom.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
Try it Yourself 

Report error:

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail: shaurya.y321@gmail.com

Forum | About

LearnToCode is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using LearnToCode, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2022 by Auxilium Info. All Rights Reserved. LearnToCode is Powered by Auxilium