Scribd
Upload
3 views

HTML Background Images

Uploaded by

RamanKumarJha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

HTML Background Images

Uploaded by

RamanKumarJha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

Dark code

  HTML CSS   
 Menu 
ADVERTISEMENT
Log in

HTML Background Images


❮ Previous Next ❯

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

Background Image 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_girl.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:
Dark mode
D k d
Dark code
 <style>
 HTML CSS   
p {
background-image: url('img_girl.jpg');
ADVERTISEMENT
}
</style>

Try it Yourself »

Background Image on a Page


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_girl.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:

Dark mode
D k d
Dark code
  HTML CSS   

ADVERTISEMENT

Example

<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>

Try it Yourself »

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

Example

<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>

Try it Yourself »

ADVERTISEMENT

Dark mode
D k d
Dark code
  HTML CSS Ads by   
Send feedback Why this ad?
ADVERTISEMENT

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>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>

Try it Yourself »

Background Stretch
Dark mode
D k d
Dark code
If you want the background image to stretch to fit the entire element, you can set the
HTML
background-size
 CSS   
property to 100% 100% :

ADVERTISEMENT

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('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>

Try it Yourself »

Learn More CSS


From the examples above you have learned that background images can be styled by
using the CSS background properties.

To learn more about CSS background properties, study our CSS Background Tutorial.

Dark mode
D k d
Dark code
 ❮ Previous
 HTML CSS  ❯ 
Next

ADVERTISEMENT

ADVERTISEMENT

COLOR PICKER



Get certified
by completing
a HTML
course today!

Dark mode
D k d
Dark code
  HTML CSS w3
school
s
  

ADVERTISEMENT

2
CE

02
TI 2

R
FI .
ED

Get started

ADVERTISEMENT

ADVERTISEMENT

Dark mode
D k d
Dark code
  HTML CSS   

ADVERTISEMENT

Report Error

Spaces

Upgrade

Newsletter

Get Certified

Top Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial

Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference Dark mode
D k d
HTML Colors Dark code
  HTML CSS Java Reference   
Angular Reference
jQuery Reference
ADVERTISEMENT

Top Examples
HTML Examples
CSS Examples
JavaScript Examples
How To Examples
SQL Examples
Python Examples
W3.CSS Examples
Bootstrap Examples
PHP Examples
Java Examples
XML Examples
jQuery Examples

Get Certified
HTML Certificate
CSS Certificate
JavaScript Certificate
Front End Certificate
SQL Certificate
Python Certificate
PHP Certificate
jQuery Certificate
Java Certificate
C++ Certificate
C# Certificate
XML Certificate

FORUM | ABOUT

W3Schools 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 W3Schools, you agree to have read and accepted our
terms of use, cookie and privacy policy.

Copyright 1999-2023 by Refsnes Data. All Rights Reserved.


W3Schools is Powered by W3.CSS.

You might also like