clock  Mon - Sun 8.00 AM - 8.00 PM
mail  edu@teknowize.com
fb
instagram
play store
pinterest

More

CSS Background Position

Imperial Advance Hero Image

CSS Background Position

The background position use to set the position of a background image.

 

Syntax - 

background-position: value;

 

values

center

center bottom

center top

left top

left center

left bottom

right top

right center

right bottom

If we only specify one keywordlike “left”, the othervalue will be "center".

So we need to write full value like “left top” or “center top” etc.

x% y% 
  • The first value is the horizontal position and the second value is the vertical.
  • The top left corner is 0% 0%. The right bottom corner is 100% 100%.
  • If you only specify one value, the other value will be 50%.
  • Default value is: 0% 0%
xpos ypos
  • The first value is the horizontal position and the second value is the vertical.
  • The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units.
  • If you only specify one value, the other value will be 50%.
  • You can mix % and positions

 

For example -

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

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>background Position</title>
	<style>
		h1{
			text-align: center;	
		}
		h2{
			text-align: center;	
		}
		p {
			width: 100%;
			height: 300px;
			background-image: url("https://www.teknowize.com/attachments/file_1660971989.jpg");
			background-size:contain;
			background-repeat: no-repeat;
			text-align: center;
			background-position: center;
			
		}
	</style>
</head>

<body>
	<h1> welcome to teknowize</h1>
	<h2> thank you </h2>
	<p> this is my website </p>
</body>

</html>

 

Output

Background Position

CSS