HTML, CSS

css 기초이론 - 배경 제어하기 (background-position)

일등하이 2021. 1. 14. 21:20
반응형

www.youtube.com/watch?v=wU6z02MoWnQ&list=PLv_UUi9AVBVsziY1nF_9LxA6c_oaUdQ99&index=13

 

<!DOCTYPE html>
<html lang="kr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>background-position</title>
    <style>
      div {
        border: 1px solid black;
        width: 800px;
        height: 600px;

        background-image: url('./images/ui_2.png');
        background-repeat: no-repeat;

        background-position: bottom center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

 

<!DOCTYPE html>
<html lang="kr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>background-position</title>
    <style>
      div {
        width: 1224px;
        height: 673px;
        background-color: #fafafa;
        /* width: 785px;
        height: 518px; */
        background-image: url('./images/apple_watch.jpg');
        background-repeat: no-repeat;
        /* background-size: cover; */
        background-position: bottom -104px right -86px;
        border: 1px solid crimson;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>
<!-- https://www.youtube.com/watch?v=pvSMMv9UhX8 -->

 

 

반응형