background-image よく使うパターンをメモ

7217 ワード
HTML CSS Sass slim HTML テキストリンク

目的

background-imageで、よく使うパターンをメモ

sample01

slim
  .pra
    h1 NIKE NIKE NIKE
sass
h1 {
  border-bottom: 1px solid black;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: image-url("lego.jpg");
  background-position: right bottom;
}

sample02

slim
  .pra
    h2 NIKE NIKE NIKE
sass
h2 {
  text-align: center;
  border-bottom: 1px solid black;
  background-repeat: no-repeat;
  background-size: contain;
  background-image:
    image-url('lego.jpg'),
    image-url('lego.jpg');
  background-position:
    left bottom,
    right bottom;
}

sample03

slim
  .pra
    .contain
      h3 NIKE NIKE NIKE NIKE NIKE NIKE
      p
        | Just Do It Just Do It Just Do It Just Do It Just Do It Just Do It
        br
        | Just Do It Just Do It Just Do It Just Do It Just Do It Just Do It
        br
        | Just Do It Just Do It Just Do It Just Do It Just Do It Just Do It
        br
        | Just Do It Just Do It Just Do It Just Do It Just Do It Just Do It
        br
        | Just Do It Just Do It Just Do It Just Do It Just Do It Just Do It
        br
        | Just Do It Just Do It Just Do It Just Do It Just Do It Just Do It
        br
        | Just Do It Just Do It Just Do It Just Do It Just Do It Just Do It
        br
        | Just Do It Just Do It Just Do It Just Do It Just Do It Just Do It
        br
        | Just Do It Just Do It Just Do It Just Do It Just Do It Just Do It
sass
.contain {
  background-image: image-url('lego.jpg');
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 40px;
  padding-left: 60px;
  h3 {
    padding-bottom: 10px;
    width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  p {
    color: blue;
  }
}