Full page image background using Bulma.io?

Question

I am designing a website using the Bulma.io CSS library

and have successfully made a full page coloured background, but would like to use images, I can see in their documentation that you can specify the size in px of the image, but I would like the image to be fluid, resize to it the users browser, whats the best way to do this with out causing any issues?

Dapper

Use background-image on that element set to background-size: cover; – Gemot

I am rather new to web design, what exactly do you mean by that? – Dapper

The fix was to use a self resizing background image, an answer from another question on Stackoverflow – Dapper

ur ques saved me – Lodhia

Answer 1

Read this http://bulma.io/documentation/layout/hero/ or try custom

//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>

read http://bulma.io/documentation/elements/image/ here you will find bulma.io img responsive section

Cartilage