Printable View
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?
Hi there ankitdixit,
and a warm welcome to these forums. ;)
Here is an example...
Futher reading:-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>
MDN - background-position property
coothead