Use of the Background-Position Property in CSS

**ankitdixit** · 03-23-2021, 09:58 AM

Hello All, I am new in this community and I am in my learning face for attending CSS based interviews, I want to know What is the use of the background-position property? As my research, It can be used to define the initial position of a background image but I want to their coding syntax Can anyone know the syntax?

**coothead** · 03-23-2021, 11:59 AM

Hi there ankitdixit,

and a warm welcome to these forums.

Here is an example...

Code:


<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<!--
The internal CSS should be transferred to an external file
<link rel="stylesheet" href="screen.css" media="screen">
-->

<style media="screen">
body {
    background-color: #f0f0f0;
    font: normal 1em / 1.5em sans-serif;
 } 
#example-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50vw;
    height: 33.333vw;
    margin: 1em auto;
    border: 1px solid #999;
    font-size: 4vw;
    color: #fff;
    text-shadow: 0 0 2px #000;
    background-color: #fff;
    background-image: url( https://coothead.co.uk/images/blood.jpg );
    background-repeat: no-repeat;
    background-size: 80% auto;
    background-position: center center;
}
</style>

</head>
<body>

<div id="example-container">
	Lorem Ipsum
</div>

</body>
</html>

Futher reading:-

MDN - background-position property

coothead