Use of the Background-Position Property in CSS [Archive]

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...

<!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>



<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 (https://developer.mozilla.org/en-US/docs/Web/CSS/background-position)

coothead