13/09/2013

CSS background-image property

Search w3schools.com: Select Language

HOME

HTML

C SS

JAVASC RIPT

JQUERY

XML

ASP.NET

PHP

SQL

MORE...

R EFER ENC ES

EXAMPLES

FO R UM

ABO UT

SoftLayer Is Here SoftLaye r.com /Asia-Pac C loud, de dicate d, & m anage d hosting Ne w Singapore Data C e nte r

SHARE THIS PAGE

Like

83k

CSS Reference
CSS Reference CSS Selectors CSS Reference Aural CSS Web Safe Fonts CSS Units CSS Colors CSS Color Values CSS Color Names CSS Color HEX CSS3 Browser Support

CSS background-image Property

CSS Reference
Example
Set a background-image for the body element:

WEB HOSTING

background-position Property

Best Web Hosting eUK Web Hosting UK Reseller Hosting Domain, Hosting & Email

b o d y { b a c k g r o u n d i m a g e : u r l ( ' p a p e r . g i f ' ) ; b a c k g r o u n d c o l o r : # c c c c c c ; }
Try it yourself

WEB BUILDING
Download XML Editor FREE Website BUILDER FREE Website C reator Best Website Templates

CSS Properties
animation appearance backface-visibility background background background-attachment background-color background-image background-position background-repeat background-clip background-origin background-size border bottom box caption-side clear clip color column content counter-increment counter-reset cursor direction display empty-cells float font grid-columns grid-rows hanging-punctuation height icon left letter-spacing line-height list-style margin max-height max-width min-height min-width nav

Definition and Usage

The background-image property sets one or more background images for an element. The background of an element is the total size of the element, including padding and border (but not the margin). By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally. Default value: Inherited: Version: JavaScript syntax: none no CSS1 object.style.backgroundImage="url(stars.gif)"

STATISTICS
Browser Statistics OS Statistics Display Statistics

Browser Support

The background-image property is supported in all major browsers. Note: IE8 and earlier do not support multiple background images on one element. Note: The value "inherit" is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports "inherit".

Tips and Notes

Tip: Always set a background-color to be used if the image is unavailable.

Property Values
Value url('URL') none inherit Description The URL to the image. To specify more than one image, separate the URLs with a comma No background image will be displayed. This is default Specifies that the background image should be inherited from the parent element

Try it Yourself - Examples

Multiple background images Set multiple background images for the document.

Related Pages
CSS tutorial: CSS Background CSS3 tutorial: CSS3 Backgrounds

www.w3schools.com/cssref/pr_background-image.asp

1/2

13/09/2013
opacity outline overflow overflow-x overflow-y padding page-break perspective perspective-origin position punctuation-trim quotes resize right rotation rotation-point table-layout target text top transform transition vertical-align visibility width white-space word-spacing word-break word-wrap z-index

CSS background-image property

HTML DOM reference: backgroundImage property

CSS Reference

background-position Property

Join 37 Million Who Choose to Create Websites with Wix

Start creating your own stunning website for free. Its easier than ever with Wix. 100s of designer-made HTML5 templates 100% customizable User-friendly drag n drop Editor Popular web Apps & Services Top-grade, reliable hosting Amazing SEO support - Get found on search engines like Google No coding or programming skills needed! Over 37 million people choose Wix to create their complete online presence. Create yours today!

W3Schools' Online Certification

The perfect solution for professionals who need to balance work, family, and career building. More than 10 000 certificates already issued!

Get Your Certificate

The HTML Certificate documents your knowledge of HTML. The HTML5 Certificate documents your knowledge of advanced HTML5. The CSS Certificate documents your knowledge of advanced CSS. The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM. The jQuery Certificate documents your knowledge of jQuery. The XML Certificate documents your knowledge of XML, XML DOM and XSLT. The ASP Certificate documents your knowledge of ASP, SQL, and ADO. The PHP Certificate documents your knowledge of PHP and SQL (MySQL).

Top 10 Tutorials
HTML Tutorial HTML5 Tutorial C SS Tutorial C SS3 Tutorial JavaScript Tutorial jQuery Tutorial SQL Tutorial PHP Tutorial ASP.NET Tutorial XML Tutorial

Top 10 References
HTML/HTML5 Reference C SS 1,2,3 Reference C SS 3 Browser Support JavaScript HTML DOM XML DOM PHP Reference jQuery Reference ASP.NET Reference HTML C olors

Examples
HTML Examples C SS Examples XML Examples JavaScript Examples HTML DOM Examples XML DOM Examples AJAX Examples ASP.NET Examples Razor Examples ASP Examples SVG Examples

Quizzes
HTML Quiz HTML5 Quiz XHTML Quiz C SS Quiz JavaScript Quiz jQuery Quiz XML Quiz ASP Quiz PHP Quiz SQL Quiz

Color Picker

Statistics
Browser Statistics Browser OS Browser Display

RE P O RT E RRO R

HO ME

TO P

P RI N T

FO RU M

A BO U T

A D V E RT I SE WI T H U S

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use and privacy policy. C opyright 1999-2013 by Refsnes Data. All Rights Reserved.

www.w3schools.com/cssref/pr_background-image.asp

2/2