생활코딩

Coding Everybody

코스 전체목록

닫기

배경(background)

소개

CSS를 이용하면 엘리먼트의 배경을 지정할 수 있습니다. 여기서는 배경과 관련된 중요속성들을 알아봅니다. 

  • background-color : red
  • background-image : url("bg.png")
  • background-repeat : repeat, no-repeat, repeat-x, repeat-y
  • background-attachment : scroll, fixed
  • background-position : left top  or x% y% or x y
  • background-size : 100px 100px or cover or contain

참고

w3schools.com

 

댓글

댓글 본문
작성자
비밀번호
  1. 푸른하늘
    11일차 공부 감사합니다
  2. 이경일
    background-size : width height / cover / contain; (cover는 width 꽉채우기)
    background-attachment : scroll / fixed;
    background-position: center right /top bottom /left ;
    background-image: url(' ');
    background-repeat: no-repeat,repeat;
  3. 오빠는다르다
    감사합니다~!!!!
  4. sunday00
    현재 만들고 있는 html과 같은 폴더에 있으면 되고, 되도록 파일 이름을 영문으로 해보세요.
    확장자와 파일명이 맞는지도 체크해 보세요.
    대화보기
    • 머리에 속속 들어오게 가르치시네요. 땡큐
    • 오들오들오드리
      그림을 다운 받아서 어느 경로에 저장하면 될까요?
      이고잉님을 따라서 잘 해왔는데... 그림 부분에서 막혔습니다 ㅠㅠ
      도와주세요~~
    • 세븐나이츠
      감사합니다
    • 대단한 수업입니다. 다 알았다 생각했는데 여기와서 모르고 지냈던 10년을 보충해주네요. 초특급감사!
    • php가 첫취업?
      전체적인 맥락을 이해하기 쉽게 설명해줘서 좋습니다...
      다만...기본 내용자체가 어려운 내용이다 보니...반복적인 연습으로 자기것으로 만들 노력이 필요한거 같습니다
    • funlife
      감사합니다..
    • 감사합니다!!
    • 한지선
      background-attachment : fixed가 신형 안드로이폰에서는 적용되지 않는 것 같던데 egoing님의 parallax강의를 따라하다가 궁금해서 질문 남깁니다.
    • 임지호
      background : 엘리먼트의 배경에 이미지나 색깔 등을 지정할 수 있는 속성
      - background-color : 색깔 지정, -image : 이미지 지정(배경이 투명한 이미지를 쓰면 color와 같이 쓸수있음)
      -repeat : 반복에 관한 설정, -attachment : 스크롤 내릴 때 배경도 같이 내릴지 안내릴지
      -size : 크기에 관한 설정(cover, contain : 손실있어도 꽉차게, 꽉안차도 손실없게), -position : 위치 결정
      background : 축약형
    • 박상민
      잘보았습니다 감사합니다
    • 이성용
      꼭 필요한 내용만 설명하고 나머지는 고기잡는 법을 알려주셔서 전체적인 내용이 잘 이해됩니다.
    • 박정호
      Css 고맙습니다
    • wlsl
      2016.09.12. 완료!
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기