How to set the background image of an element using CSS

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.

body {
  background-image: url(https://cdn-images-1.medium.com/fit/c/120/120/1*lm123X5JhljzmRoRE-TA3g.png);
}

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.

body {
  background-image: url(https://cdn-images-1.medium.com/fit/c/120/120/1*lm123X5JhljzmRoRE-TA3g.png);
  background-repeat: no-repeat;
}

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.

button {
    display: inline-block;
    height: 130px;
    width: 130px;
    background-image:url('https://cdn-images-1.medium.com/fit/c/120/120/1*lm123X5JhljzmRoRE-TA3g.png');
    background-repeat: no-repeat;
    background-position: center center;
}
Free AI Mock Interviews
Coding Interview
Coding PatternsFree Interview
Gain insights and practical experience with coding patterns through targeted MCQs and coding problems, designed to match and challenge your expertise level.
System Design
You TubeFree Interview
Learn to design a video streaming platform like YouTube by tackling functional and non-functional requirements, core components, and high-level to detailed design challenges.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved