1# Defining Animations with the background-position Attribute 2 3 4By changing the **background-position** attribute (where the first value is the position on the x-axis and the second value is the position on the y-axis), you move a background image. If the background image goes beyond the respective component boundaries, the excess parts will not be displayed. 5 6 7```html 8<!-- xxx.hml --> 9<div class="container"> 10 <div class="content"></div> 11 <div class="content1"></div> 12</div> 13``` 14 15 16```css 17/* xxx.css */ 18.container { 19 height: 100%; 20 background-color:#F1F3F5; 21 display: flex; 22 flex-direction: column; 23 justify-content: center; 24 align-items: center; 25 width: 100%; 26} 27.content{ 28 width: 400px; 29 height: 400px; 30 /* The aspect ratio 1:1 is not recommended. */ 31 background-image: url('common/images/bg-tv.jpg'); 32 background-size: 100%; 33 background-repeat: no-repeat; 34 animation: change 3s infinite; 35 border: 1px solid black; 36} 37.content1{ 38 margin-top:50px; 39 width: 400px; 40 height: 400px; 41 background-image: url('common/images/bg-tv.jpg'); 42 background-size: 50%; 43 background-repeat: no-repeat; 44 animation: change1 5s infinite; 45 border: 1px solid black; 46} 47/* Move the background image out of the component. */ 48@keyframes change{ 49 0%{ 50 background-position:0px top; 51 } 52 25%{ 53 background-position:400px top; 54 } 55 50%{ 56 background-position:0px top; 57 } 58 75%{ 59 background-position:0px bottom; 60 } 61 100%{ 62 background-position:0px top; 63 } 64} 65/* Move the background image within the component. */ 66@keyframes change1{ 67 0%{ 68 background-position:left top; 69 } 70 25%{ 71 background-position:50% 50%; 72 } 73 50%{ 74 background-position:right bottom; 75 } 76 100%{ 77 background-position:left top;; 78 } 79} 80``` 81 82 83> **NOTE** 84> 85> The **background-position** attribute can only be used to move background images, but not the background color (**background-color**). 86> 87>  88
