web-dev-qa-db-ja.com

Bulma.ioを使用したページ全体の画像の背景？

Bulma.io CSSライブラリ を使用してウェブサイトをデザインしています

とフルページの色付きの背景を正常に作成しましたが、画像を使用したいのですが、ドキュメントで画像のpxでサイズを指定できることを確認できますが、画像を滑らかにしてユーザーに合わせてサイズ変更したいブラウザ、問題を引き起こさずにこれを行う最善の方法は何ですか？

htmlcssbackgroundbulma
6
AlexDoe

これを読んでください http://bulma.io/documentation/layout/hero/ またはカスタムを試してください

//In HTML Section you need to create a class name Ex. bg-imge
  <div class="bg-img">

  </div>

 //in custom CSS you need to add
   .bg-img { 
        background-image: url(demo.jpg) ;
        background-position: center center;
        background-repeat:  no-repeat;
        background-attachment: fixed;
        background-size:  cover;
        background-color: #999;

 }

// [.img-responsive is custom class in bootstrap] 
// You can use custom class like
.img-responsive {
      display: block; 
      max-width: 100%;
      height: auto;
   } 
//which you can put in your html Img part
<img class="img-responsive" src="demo.jpg"/>

//in bulma.io [i'm not sure] but For single image you can use this. 
//It will auto responsive.

  <div class="tile ">
   <figure class="image">
    <img src="demo.jpg">
   </figure>
  </div>

読み取り http://bulma.io/documentation/elements/image/ ここにbulma.io imgレスポンシブセクションがあります

9
Mostafa Baezid