Html 使用 Bulma.io 的整页图像背景？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39427416/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Full page image background using Bulma.io?
提问by AlexDoe
I am designing a website using the Bulma.io CSS library
我正在使用Bulma.io CSS 库设计一个网站
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?
并成功制作了整页彩色背景，但想使用图像，我可以在他们的文档中看到您可以指定图像的像素大小，但我希望图像是流畅的，请根据用户调整大小浏览器，在不引起任何问题的情况下，最好的方法是什么？
回答by Mostafa Baezid
Read this http://bulma.io/documentation/layout/hero/or try custom
阅读此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>
read http://bulma.io/documentation/elements/image/here you will find bulma.io img responsive section
阅读http://bulma.io/documentation/elements/image/在这里你会发现 bulma.io img 响应部分
