Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Background Image | Decorative Effects
CSS Fundamentals

book
Background Image

background-image property allows us to add an image as the background of an HTML element. The basic syntax is so simple:

background-image: url("image-url.jpg");

As a value for the background-image property, we use url(), and inside these brackets, we specify the image url.

html

index.html

css

index.css

copy
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi, aliquam.</div>
</body>
</html>

background-repeat

It determines if the image will be repeated horizontally, vertically, both or not at all.

background-repeat: repeat | repeat-x | repeat-y | no-repeat;
html

index.html

css

index.css

copy
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="box"><span> no-repeat</span></div>
<div class="box"><span>repeat</span></div>
<div class="box"><span>repeat-x</span></div>
<div class="box"><span>repeat-y</span></div>
</body>
</html>

background-position

background-position is used to set the starting position of a background image within an element's background area. This property allows us to specify where the background image should be placed and how it should be positioned relative to the element. We have to set the position on the x and y axis

background-position: x y
html

index.html

css

index.css

copy
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="box"><span>in the center</span></div>
<div class="box"><span>on the right top</span></div>
<div class="box"><span>on the left bottom</span></div>
<div class="box"><span>using px</span></div>
</body>
</html>

background-size

background-size specifies the size of an element's background image. It can be used to scale the image to fit the element, or to set a specific size for the background image.

background-size: auto | cover | contain | value in px/em/rem;
  • auto - default value, which sets the background image to its original size;
  • cover - scales the background image to completely cover the element while maintaining its aspect ratio. This may cause some parts of the image to be cropped if the aspect ratio of the element and the image are different;
  • contain - scales the background image to fit the entire element while maintaining its aspect ratio. This may cause empty spaces to be visible around the image if the aspect ratio of the element and the image are different;
  • value - sets the width and height of the background image.

For this example, we will use the bigger picture than we need as we wish to consider the behavior difference of each value for the background-size property.

html

index.html

css

index.css

copy
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="box"><span>auto</span></div>
<div class="box"><span>cover</span></div>
<div class="box"><span>contain</span></div>
<div class="box"><span>value in px</span></div>
</body>
</html>

1. What does the background-image property do?

2. What does the background-repeat property do?

3. What property determines the position of an element's background image?

question mark

What does the background-image property do?

Wählen Sie die richtige Antwort aus

question mark

What does the background-repeat property do?

Wählen Sie die richtige Antwort aus

question mark

What property determines the position of an element's background image?

Wählen Sie die richtige Antwort aus

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 2
some-alt