Set background image position to center in HTML and CSS

Description

The following code shows how to set background image position to center.

Example


<html>
<head>
<!--   w  w  w  .  j  av a2 s  .com-->

<style type='text/css'>
body {
background-image: url(http://www.java2s.com/style/download.png);
background-repeat: no-repeat;
background-position:0 0;
background-color: #ffffff;
font-family:arial;}

div {
background-image: url(http://www.java2s.com/style/download.png);
background-repeat: no-repeat;
background-position:center;
width:500px;
height: 100px;
border:solid 1px black;}
</style>

</head>

<body>
<h2>background-position</h2>
<div></div>
</body>
</html>

Click to view the demo

The code above generates the following result.

Set background image position to center in HTML and CSS

Home »
  HTML CSS Tutorial »
    Layout »
      Background

HTML CSS Tutorial Background
Compare background image position: left, ri...
Compare background image position settings ...
Demonstrate different ways to set backgroun...
Set Background image position to center cen...
Set Background image position to right bott...
Set background image for headings in HTML a...
Set background image position: 50% center i...
Set background image position: bottom cente...
Set background image position to 0 0 in HTM...
Set background image position to 0% 50% in...
Set background image position to 10% 10% in...
Set background image position to 10px 10px ...
Set background image position to 10px 50% i...
Set background image position to 10px top i...
Set background image position to 50% 10px i...
Set background image position to 50% 20% in...
Set background image position to bottom lef...
Set background image position to center 100...

Set background image position to center in ...

Set background image position to left cente...
Set background image position to left in HT...
Set background image position to left top i...
Set background image position to right cent...
Set background image position to right in H...
Set background image position to top 10px i...
Set background image position to top center...
Set background image position to top left i...
Set background image position to top right ...
Set background image positioned 40 pixels f...
Set background image repeat along x in HTML...
Set background image to not repeat in HTML ...
Set background image to repeat in HTML and ...
Set background-position to center 10px in H...
Set background repeat along y with repeat-y...
Set heading with background image of differ...