使用 Bulma.io 的整页图像背景？

Question

设计网站

并且已经成功制作了整页彩色背景，但我想使用图像，我可以在他们的文档中看到您可以指定图像的 px 大小，但我希望图像是流畅的，调整用户浏览器的大小，在不引起任何问题的情况下执行此操作的最佳方法是什么？

Answer 1

阅读此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 响应部分

Answer 2

这对我有效。看看这个 article

import React from 'react'
import Content from '../Content'
import PropTypes from 'prop-types'

const AboutPageTemplate = (props) => {
  const { title, content, contentComponent } = props
  const PageContent = contentComponent || Content

  return (
    <div>
      <section
        className='hero is-fullheight is-family-  secondary' 
        style={{
          backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)), url(' +              'https://source.unsplash.com/6tQ_sXnsYzM/1920x1080' + ')',
          backgroundPosition: 'center',
          backgroundSize: 'cover',
          backgroundRepeat: 'no-repeat',

        }}>
        <div className='hero-body'>
          <div className='container'>
            <h1 className='title has-text-white is-family-secondary'>
              ABOUT, Ehime, Japan.
            </h1>
            <h2 className='subtitle has-text-white is-family-secondary'>
              uploaded by HendrixEesti - http://en.wikipedia.org/wiki/Image:Ishizuchi.jpg
            </h2>
          </div>
        </div>
      </section>

      <section className='section section--gradient'>
        <div className='container'>
          <div className='columns'>

            <div className='column is-10 is-offset-1'>
              <div className='section'>
                <h1 className='title'>{title}</h1>

                <PageContent className='content is-family-secondary' content={content} />
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}

AboutPageTemplate.propTypes = {
  title: PropTypes.string.isRequired,
  content: PropTypes.string,
  contentComponent: PropTypes.func,
}

export default AboutPageTemplate

$primary: #103f75

$primary-invert: #ffffff
$family-secondary: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;

// New styles
$link: #66088be3 !default
$info:  #9c0537 !default

html,
body,
#___gatsby,
#gatsby-focus-wrapper,
#layout-wrapper
  height: 100%

#layout-wrapper
  width: 100%
  display: flex
  flex-direction: column

#content-wrapper
  flex: 1

#background-image
  position: relative
  width: 100%
  height: 100%
  background-size: 100px

nav
  border-bottom: lightgray solid 0.1vmin
  border-radius: 1px

body 
  font-family: $family-secondary
  
// @each $key, $image in $backgrounds
//   .hero-#{$key}
//     @extend .hero
//     background-image: url(#{'$image'})


  // .logo 
  // display: flex;
  // background-size: contain;
  // background-repeat: no-repeat;
  // background-position: center;
  // height: 10rem;
  // width: 10rem;
  // align-items: center;
  // justify-content: center;

 

.hero
  &.has-background
    position: relative
    overflow: hidden
  &-background
    position: absolute
    object-fit: cover
    object-position: center center
    width: 70%
    height: 70%
    &.is-transparent
      opacity: 0.3

.content .taglist
  list-style: none
  margin-bottom: 0
  margin-left: 0
  margin-right: 1.5rem
  margin-top: 1.5rem
  display: flex
  flex-wrap: wrap
  justify-content: left
  align-items: center
  li
    padding: 0 2rem 1rem 0
    margin-bottom: 1.5rem
    margin-top: 0

.margin-top-0
  margin-top: 0 !important

// .has-bg-img { background: url('/static/')center center; background-size:cover; }





@import "~bulma"

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

使用 Bulma.io 的整页图像背景？

Full page image background using Bulma.io?

html

css

background

bulma