HTML5 Background Images
HTML5 Background Images
In this tutorial, we’ll teach you how to apply background images to different HTML elements.
How to Apply HTML5 Background Images?
To apply a background image to any HTML document, use the CSS style attribute inside an HTML tag and the CSS background-image property.
Example
Adding HTML5 background Image to div element:
<!DOCTYPE HTML>
<html>
<head>
<title>
HTML5 Background Images
</title>
</head>
<body>
<div style="background-image: url('HTML5.png');">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis maiores accusamus perspiciatis excepturi porro
voluptatibus amet ipsum ullam omnis suscipit illum possimus ipsa, a veritatis inventore, dolorum vel unde
adipisci?
Lorem ipsum dolor sit amet consectetur adipisicing elit. In, expedita nihil. Numquam, dolorem fugiat non aliquam
illum quas quaerat qui natus vero et voluptates, sequi at quasi dolores corrupti consectetur.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, cupiditate! Beatae magnam perferendis nam
libero aperiam, id animi eius autem distinctio vero repellat, et voluptatibus adipisci reiciendis. Soluta,
laboriosam nobis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias numquam quas cupiditate unde, aspernatur rem
ducimus culpa ipsa quasi velit maxime saepe mollitia dolorum rerum facere sunt! Rem, quam beatae?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum sequi reiciendis eos voluptates ipsam. Eius
repellendus unde assumenda fugit reiciendis expedita tenetur. Ipsum deleniti laborum, vel non ullam labore
tempora!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum aliquid, dolorem earum explicabo necessitatibus
architecto blanditiis, eius recusandae suscipit magni ipsum? Nam quos officiis placeat quae quaerat excepturi
mollitia minima.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestiae magni, recusandae necessitatibus cumque
inventore suscipit nulla fuga repellat minus placeat animi fugit iure perferendis repellendus nam repudiandae
beatae deleniti laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem blanditiis ea nihil aspernatur voluptatem,
commodi eligendi quod adipisci eum inventore animi nulla, asperiores aliquam id deleniti pariatur beatae
laboriosam sed.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsa, repudiandae sunt modi earum expedita adipisci
necessitatibus facilis deleniti omnis porro quis nihil aliquid culpa dolor distinctio pariatur assumenda
sapiente voluptate!
</div>
</body>
</html>
The output of this code will be
You can also specify the background image in the style element enclosed in the head section.
Example
Applying background-image property in the <style> element:
<!DOCTYPE HTML>
<html>
<head>
<title>HMTL5 Background Images</title>
<style>
{
background-image: url('HTML5.png');
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis maiores accusamus perspiciatis excepturi porro
voluptatibus amet ipsum ullam omnis suscipit illum possimus ipsa, a veritatis inventore, dolorum vel unde
adipisci?
Lorem ipsum dolor sit amet consectetur adipisicing elit. In, expedita nihil. Numquam, dolorem fugiat non aliquam
illum quas quaerat qui natus vero et voluptates, sequi at quasi dolores corrupti consectetur.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, cupiditate! Beatae magnam perferendis nam
libero aperiam, id animi eius autem distinctio vero repellat, et voluptatibus adipisci reiciendis. Soluta,
laboriosam nobis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias numquam quas cupiditate unde, aspernatur rem
ducimus culpa ipsa quasi velit maxime saepe mollitia dolorum rerum facere sunt! Rem, quam beatae?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum sequi reiciendis eos voluptates ipsam. Eius
repellendus unde assumenda fugit reiciendis expedita tenetur. Ipsum deleniti laborum, vel non ullam labore
tempora!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum aliquid, dolorem earum explicabo necessitatibus
architecto blanditiis, eius recusandae suscipit magni ipsum? Nam quos officiis placeat quae quaerat excepturi
mollitia minima.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestiae magni, recusandae necessitatibus cumque
inventore suscipit nulla fuga repellat minus placeat animi fugit iure perferendis repellendus nam repudiandae
beatae deleniti laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem blanditiis ea nihil aspernatur voluptatem,
commodi eligendi quod adipisci eum inventore animi nulla, asperiores aliquam id deleniti pariatur beatae
laboriosam sed.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsa, repudiandae sunt modi earum expedita adipisci
necessitatibus facilis deleniti omnis porro quis nihil aliquid culpa dolor distinctio pariatur assumenda
sapiente voluptate!
</div>
</body>
</html>
Applying Background Image on Page
If you want to apply html5 background images to the full page, define the background-image property for the body element:
Example
Allowing HTML5 background images on an entire page.
<!DOCTYPE HTML>
<html>
<head>
<title>HMTL5 Background Images</title>
<style>
body {
background-image: url('HTML5.png');
}
</style>
</head>
<body>
</body>
</html>
The output of this code will be
Repetition of HTML Background Images
If the background image is smaller than the element on which it is applied, it will repeat horizontally and vertically until it completely covers a fundamental element.
Example
To stop the repetition of HTML5 background images, assign the value no-repeat to the background-repeat property.
<!DOCTYPE HTML>
<html>
<head>
<title>HMTL5 Background Images</title>
<style>
div {
background-image: url('HTML5.png');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Soluta repudiandae veniam excepturi consectetur,
corporis, voluptatibus tempore nesciunt non, modi harum maxime repellendus nihil id cumque impedit fuga officia?
Sint, nostrum!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis sunt vitae accusamus adipisci illum veniam
alias quidem, harum ducimus aperiam, enim voluptatem neque mollitia, repellat nisi esse rem aliquam sequi!
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nam tenetur provident suscipit voluptatem alias
numquam minus soluta adipisci iusto, repellat exercitationem libero, quae tempora. Optio accusamus aut similique
dolorum praesentium?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore, hic recusandae! Voluptatibus eius unde sint
doloremque veniam obcaecati ad nostrum ut vel aspernatur vero, in quisquam quas eligendi architecto sed.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem sint dolor neque magni. Officiis
consequatur itaque eum sapiente! Rerum hic molestias est ut minus mollitia ex quis. Ex, veniam eius.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet sint laboriosam do00000lores culpa error at aut
est quae eaque optio. Aperiam, esse iusto. Possimus a nesciunt modi eum eos minima?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam corrupti suscipit fugit quidem laudantium non
obcaecati ex. In maxime repudiandae iste possimus? Eligendi corporis id nam! Consequuntur voluptatum maiores
adipisci?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nostrum reprehenderit nihil, hic fugiat delectus ullam
corrupti sint qui ipsum enim maiores laboriosam, ipsa odio tenetur. Aspernatur minima quas laboriosam cum.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quos mollitia doloremque rem in quas
dignissimos harum voluptatum! Provident ea laudantium atque laborum, eum ducimus labore neque! Quidem,
accusantium saepe.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ad deserunt quos dolores consequatur
accusantium, at quas. Eos, libero ut? Labore at error pariatur provident dolorem reprehenderit atque corrupti
autem.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda optio obcaecati voluptatem placeat sint.
Temporibus, aspernatur accusamus. Enim nesciunt dolorum nemo reiciendis distinctio molestias voluptate deleniti
laborum itaque, sit doloribus!
</div>
</body>
</html>
The output of this code will be
Background Cover
If you want your background image to enlarge enough to cover an entire element, set the background-size property to cover.
Moreover, to ensure that the full element is always covered with a background image, assign the value fixed to the background-attachment property.
In this way, the background image will cover an entire element, and the proportions of an image will remain intact.
Example
<!DOCTYPE HTML>
<html>
<head>
<title>HMTL5 Background Images</title>
<style>
body {
background-image: url('web development.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
</head>
<body>
</body>
</html>
The output of this code will be
Stretch HTML5 Background Images
If you want your HTMl5 background images to stretch enough to fit completely on an element, assign the value 100% 100% to the background-size property.
Example
<!DOCTYPE HTML>
<html>
<head>
<title>HMTL5 Background Images</title>
<style>
body {
background-image: url('Wordpress.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-size: 100% 100%;
}
</style>
</head>
<body>
</body>
</html>
The output of this code will be
To learn more about HTML5 background images, read its documentation.
