Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
background-image

How to set the background image of an element using CSS

Educative Answers Team

In CSS, the background-image property sets background images for an element.

By default, a background image is placed at the top-left corner of an element and is repeated both vertically and horizontally.

Tip: The background of an element in CSS is the total size of the element, including the padding and border (but not the margin).

svg viewer

CSS syntax

background-image: url|none|initial|inherit;

Parameter Explanation
URL Specifies more than one images (separate URLs with a comma).
none No background image will be displayed. This is the default value.
initial The initial keyword is used to set a CSS property to its default value.
inherit The inherit keyword specifies that property should inherit its value from its parent element.

In the code snippet below, the background of the <body> element has been set to an image of a tree. Refer to the CSS tab for the code.

In the code snippet below, the background of the <body> element has been set to an image of our logo but with repetitions, not allowed using the following statement.

background-repeat: no-repeat

Refer to the CSS tab for the code.

In the code snippet below, the background of the <button> element has been set to an image of our logo and is positioned in the middle using the following statement.

background-position: center center;

Refer to the CSS tab for the code.

RELATED TAGS

css
background-image
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring