我使用Bulma.io CSS library使用Bulma.io的整頁圖像背景?
設計一個網站,並已成功地做了一個整版彩色背景,但是想用圖片,我可以將他們的文檔中看到,您可以指定圖像的像素大小,但我希望圖像變得流暢,將其調整爲用戶瀏覽器,最好的辦法是在不出現任何問題的情況下做到這一點?
我使用Bulma.io CSS library使用Bulma.io的整頁圖像背景?
設計一個網站,並已成功地做了一個整版彩色背景,但是想用圖片,我可以將他們的文檔中看到,您可以指定圖像的像素大小,但我希望圖像變得流暢,將其調整爲用戶瀏覽器,最好的辦法是在不出現任何問題的情況下做到這一點?
閱讀本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敏感部件
該元素設置爲'背景尺寸上謝謝!這是完美的。 – AlexDoe
您的歡迎。快樂編碼:) –
使用的background-image:蓋;' –
我對網頁設計相當陌生,你究竟是什麼意思? – AlexDoe
解決的辦法是使用自調整大小的背景圖像,從另一個問題的答案Stackoverflow – AlexDoe