2016-09-10 6 views
2

Я разработке веб-сайта с помощью Bulma.io CSS libraryИзображение полной страницы с использованием Bulma.io?

и успешно сделали полную страницу цветной фон, но хотел бы использовать изображения, я могу видеть в их документации, вы можете указать размер в пикс изображения, но Я хотел бы, чтобы изображение было жидким, изменило его размер в браузере пользователей, каков наилучший способ сделать это без каких-либо проблем?

+1

Использование фонового изображения для этого элемента, установленного на 'фона размер: крышка;' –

+0

Я довольно новичок в веб-дизайне, что именно вы подразумеваете под этим? – AlexDoe

+0

Исправление должно было использовать само изменение размера фонового изображения, ответ от другого вопроса на Stackoverflow – AlexDoe

ответ

4

Прочитайте это 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 отзывчивым раздел

+0

Спасибо! Это идеально. – AlexDoe

+0

ваш приветствовать. Счастливое кодирование :) –