🍁background
1. background-color
2. background-image
3. background-repeat
4. background-position
5. background-attachment
6. background-size
background-size: width height;<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/ex39.css">
</head>
<body>
<div id="box"></div>
</body>
</html>#box {
border: 1px solid black;
width: 400px;
height: 400px;
margin: 50px;
background-image: url(../../asset/images/cat05.jpg);
background-size: 400px 400px;
}
외부에서 CSS 작업을 하여 background image를 출력하였다.
가로 세로 비율의 원본 비율 유지
background-size: 400px 300px;background-size: 400px auto;1차 방정식으로 계산하여 사진의 원본 비율을 항상 맞추기 어렵기 때문에 width만 설정하고 heigth는 auto로 설정한다.
사진 반복 해제, 중앙 정렬
background-repeat: no-repeat;
background-position: center center;
장축 기준, 단축 기준
background-size: 400px auto;
background-size: auto 400px;background-size: contain;
background-size: cover;
width와 heigth 중에서 어떤 것을 기준으로 auto를 설정하느냐에 따라서 영역을 꽉 채우게 만들 수가 있다.
이 결과에 따라서 장축을 기준으로 한 것, 그리고 단축을 기준으로 한 것으로 구분한다.
위 사진은 height 값을 설정하고 width를 auto로 설정하여 단축을 기준으로 한 결과이며, 이를 contain과 cover로 설정할 수 있다.
이미지를 배경에 삽입
이미지를 문서에 꽉 채우는 작업을 해보도록 하자.
추가로 화면을 늘리거나 줄이더라도 이미지의 크기(종횡비)가 변하지 않고, 이미지가 반복되지 않도록 설정한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/ex40.css">
</head>
<body>
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque nostrum minima, omnis soluta vero ab totam repellat voluptatum animi deserunt fuga illo ea iusto modi tempore in doloribus quo? Numquam.</p>
<p>Dolore eius, ad nam, error officia facilis quam voluptatibus necessitatibus incidunt, explicabo temporibus. Laboriosam tenetur laborum eius debitis impedit esse quas quod, in alias voluptate temporibus cumque expedita eveniet distinctio.</p>
<p>Mollitia accusantium cum quis quasi dignissimos? Veniam, ratione! Quo, unde sed in reiciendis ipsam quam ab tempora rerum voluptatem excepturi dolore porro soluta adipisci beatae? Mollitia tempore soluta culpa cum?</p>
<p>Laborum perspiciatis perferendis veniam ab dolor sit tenetur quisquam accusamus maxime, possimus hic optio mollitia beatae eum repellendus aliquid et aut modi vero, quasi itaque. Odio velit tenetur repellendus excepturi.</p>
<p>Praesentium, magni incidunt doloremque eveniet obcaecati tenetur aliquid. Praesentium iusto quae impedit error magni vitae aliquam at quis provident enim, magnam sed doloribus earum quos natus odio voluptatem atque fugit!</p>
<p>Et expedita nihil aliquam deserunt illo beatae dolorem praesentium eveniet labore reprehenderit quas optio non culpa harum nemo id doloribus commodi magni similique assumenda voluptate molestias, omnis, ipsa repellendus? Nisi.</p>
<p>Aliquam voluptatem delectus, nemo doloribus sapiente necessitatibus voluptas et repellat debitis eaque nesciunt placeat aliquid nobis impedit, quisquam eius recusandae perferendis ut repudiandae dolor nihil animi ipsum. Odio, repellat exercitationem!</p>
<p>Rerum non vitae harum dolorum cumque illo labore incidunt temporibus ex ducimus amet provident aspernatur accusamus voluptates corrupti natus dolorem quod maiores nam voluptate molestias sed, praesentium quis? Consequatur, deserunt.</p>
<p>Facere, animi earum rerum similique quaerat officiis magnam dolor veritatis necessitatibus sint id vel unde maiores ratione, non voluptatibus quia vero. Sapiente vero impedit cupiditate inventore veritatis error sit asperiores.</p>
<p>Laborum optio voluptatum accusantium quia quibusdam omnis odio. Magni minima voluptatibus delectus aut qui vel temporibus repellendus rerum molestias ea, assumenda dolorum soluta animi numquam voluptatem, corrupti expedita architecto saepe.</p>
<p>Cupiditate, asperiores, ea tempora voluptate itaque eum cumque, et debitis neque non nulla? Totam enim dignissimos odio sed reprehenderit ipsa a magni aperiam magnam, odit incidunt dolor nemo veniam. Fugiat!</p>
<p>Quas sed inventore optio. Aliquid delectus porro quia ratione atque adipisci? Cumque, reprehenderit tempora! Pariatur quidem ipsum libero id est labore debitis similique repellat obcaecati iure vitae unde, aspernatur incidunt.</p>
<p>Facere alias laudantium aut eum, odit velit unde in itaque vitae optio quos, laborum, dolor officiis molestiae maxime? Totam quod eligendi dignissimos odit accusantium nobis assumenda repellendus provident officia iste!</p>
<p>Quasi ducimus suscipit accusamus laborum voluptate neque, accusantium dignissimos architecto excepturi distinctio ipsa odit eligendi blanditiis nulla voluptas est praesentium rem aliquam assumenda repudiandae nemo quisquam rerum. Sint, neque deserunt!</p>
<p>Accusamus, tempore. Delectus id adipisci suscipit voluptatibus incidunt repellat quae atque placeat nostrum accusantium ducimus culpa vitae, velit accusamus tempore, nemo, odit harum illo at assumenda vero perferendis aspernatur. Quis!</p>
<p>Nobis facere minima tenetur cupiditate nam sequi esse reprehenderit repudiandae. Accusamus reprehenderit optio natus pariatur, rem tempora provident, quis minima distinctio deleniti asperiores nulla ab ad, nesciunt dignissimos amet facere?</p>
<p>Ea tempora officiis corrupti veritatis consequatur tenetur quibusdam, beatae itaque a amet necessitatibus, nostrum deserunt aperiam. Deleniti ex illum nesciunt voluptatem facere ducimus earum cumque, atque odio asperiores, voluptatum itaque.</p>
<p>Dignissimos impedit veritatis illum, tempore mollitia, ratione cum fuga facilis repellat architecto commodi! Unde, odio. Dignissimos neque, repellendus veritatis, voluptas adipisci tempora accusantium expedita est sit beatae voluptatem iure magnam!</p>
<p>Iste maiores eum rerum neque distinctio possimus modi cumque quaerat eveniet ut quo similique autem temporibus incidunt tenetur obcaecati asperiores quos perferendis, non tempora amet animi repellendus. Dolores, quisquam voluptatem!</p>
<p>Ducimus voluptatum itaque accusantium. Dicta soluta eius veritatis commodi culpa eaque cumque quod facere alias fuga nobis officia excepturi aperiam nam assumenda obcaecati iure distinctio asperiores labore ducimus, provident ullam.</p>
<p>Ad aliquid assumenda eos vitae, asperiores ex architecto mollitia dolores quaerat sunt, eaque id nihil quod error quae facilis voluptatem, eum exercitationem cupiditate dolorum totam placeat sapiente! At, tenetur sed.</p>
<p>Voluptas, aspernatur. Magnam quae deserunt animi deleniti velit illo. Quis, repudiandae accusantium. In laborum, ducimus officiis eius laudantium nihil autem ex optio nam voluptatum sapiente nobis quae. Quisquam, quam facere!</p>
<p>Ad eligendi fugit provident maxime, qui consequuntur quibusdam deleniti ipsam? Explicabo iusto ipsa molestiae, possimus illo officia modi quibusdam aliquam architecto! Error eaque maxime, voluptate necessitatibus ducimus iste ut nemo?</p>
<p>Quam nesciunt non aliquid amet minima est dolore, tenetur possimus eius nobis molestiae consequatur fugit. Neque, accusamus. Optio ratione fuga sapiente atque saepe rem, eos velit eaque molestiae id odit?</p>
<p>Aut aliquid reprehenderit consequuntur sequi odit asperiores soluta itaque magni inventore est et optio, voluptatum repellendus, praesentium dolorem adipisci a eaque, non delectus modi earum molestias labore dolores? Voluptatum, eveniet.</p>
<p>Quas autem nulla neque iste ipsum accusantium inventore voluptates qui voluptatum fugit assumenda consectetur molestias facere, dolorum vel ipsa blanditiis hic velit harum architecto id commodi? Et similique deleniti quas.</p>
<p>Doloremque sunt velit molestias quam, placeat iusto repellat nihil accusantium? Impedit temporibus, incidunt vel tempora veritatis quo, inventore tempore voluptas adipisci neque commodi aspernatur harum et modi aliquam. Pariatur, ipsa.</p>
<p>Atque unde maiores molestiae fuga inventore amet, cupiditate, modi quibusdam necessitatibus voluptas deserunt odit odio ad! Velit, earum vero eligendi sit voluptatem neque obcaecati culpa incidunt cumque, perspiciatis eum esse.</p>
<p>Aperiam id nam dolorum laudantium laboriosam exercitationem. Dicta eaque quia ipsam qui, doloribus perferendis repellat recusandae explicabo molestias dignissimos? Odio ea iste assumenda dolor hic voluptas id quos eius voluptates.</p>
<p>Sint explicabo atque praesentium beatae quia aut quasi sequi mollitia commodi natus harum delectus distinctio, placeat non fugit nulla dolorem. Hic ipsa voluptate quis commodi reiciendis veniam nihil officia aliquam.</p>
</body>
</html>html {
background-image: url(../../asset/images/gimbal.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
스크롤을 움직여도 attachment: fixed 속성으로 인해 이미지가 배경에 고정된다.
