Bulma: Hero background image

[mixedd69]

Cant get to add a backround img for hero section:

<section class="hero is-primary is-fullheight header-image"> <!-- Hero header: will stick at the top --> <div class="hero-head"> <header class="navbar"> <div class="navbar-brand"> <a class="navbar-item" href="http://bulma.io"> <img src="http://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28"> </a>

                    `<div class="navbar-burger" v-on:click="showNav = !showNav" v-bind:class="{ 'is-active' : showNav }">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
                <div class="navbar-menu" v-bind:class="{ 'is-active' : showNav }">
                    <!-- navbar start, navbar end -->
                    <div class="navbar-end">
                        <a class="navbar-item" href="/about">About</a>
                        <a class="navbar-item" href="/path">Path</a>
                        <a class="navbar-item" href="/blog">Blog</a>
                    </div>
                </div>
            </header>
        </div>


        <!-- Hero content: will be in the middle -->
        <div class="hero-body">
            <div class="container has-text-centered">
                <h1 class="title">
                    Title
                </h1>
                <h2 class="subtitle">
                    Subtitle
                </h2>
            </div>
        </div>
        <!-- Hero footer: will stick at the bottom -->
        <div class="hero-foot">
            <nav class="tabs is-boxed is-fullwidth">
                <div class="container">
                    <ul>
                        <li class="is-active"><a>Overview</a></li>
                        <li><a>Modifiers</a></li>
                        <li><a>Grid</a></li>
                        <li><a>Elements</a></li>
                        <li><a>Components</a></li>
                        <li><a>Layout</a></li>
                    </ul>
                </div>
            </nav>
        </div>
    </section>
</div>`

and CSS part:
.header-image { background-image: url("http://orig14.deviantart.net/7584/f/2015/181/2/7/flat_mountains_landscape_by_ggiuliafilippini-d8zdbco.jpg"); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-color: #999; }

Maybe theres some workaround???

[grantmoran]

I was able to accomplish the background effect I think your looking for, utilizing the following markup/styles. Let me know if it doesn't work for you.

---hero section markup---

<section class="hero is-large has-bg-img"> <div class="hero-body"> <div class="container has-text-centered"> <h1 class="title">Title 1</h1> <h2 class="subtitle">Subtitle 3</h2> </div> </div> </section>

---scss---

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

[sausin]

I've been using a similar way that @grantmoran described to get background images.

Is there however a way to make it generic somehow? For eg

<section class="hero is-large has-bg-img">
    <img is-bg-img> ... </img>
</section>

In the above example, the hero 'picks' the image from the img tag. If this kind of a setup would be possible, it would be pretty cool.

The application I am working on has some pages with such background images and one of the pages has several heros on the same page, each with its own background.

[nedjo]

In the above example, the hero 'picks' the image from the img tag. If this kind of a setup would be possible, it would be pretty cool.

That would require JavaScript. Using jQuery, something like:

$('.has-bg-img').each(function() {
  var $img = $(this).find('img.is-bg-img').first();
  if ($img) {
    $(this).css('background-image', 'url(' + $img.attr('src') + ')');
    $img.remove();
  }
});

[czamp]

If you're using Sass, an easy way to choose background images for your hero is to extend the hero class for each background image you need to use.

<section class="hero-foo is-fullheight">
  <div class="hero-body> ... </div>
</section>

And in your Sass files, extend the Hero class.

.hero-foo
  @extend .hero
  background-image: url('/img/foo.jpg')

Alternatively, you could use a Sass map to define your backgrounds.

$backgrounds: (foo: '/img/foo.jpg', bar: '/img/bar.jpg')

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

While this approach requires that you assign images to classes in your stylesheets instead of creating an img element as a child of the hero, it requires no JavaScript, and allows for a single location in your source code to define all background images for your project.

[sausin]

@nedjo Cool tip!! Thanks!

[mixedd69]

Got it working! Tnx for suggestions

_Sent from my Xiaomi MI 5 using FastHub_

[ghost]

Alternatively, you could use a Sass map to define your backgrounds.

$backgrounds: (foo: '/img/foo.jpg', bar: '/img/bar.jpg')

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

Good idea, thank you for this!

However, it should be background-image: url(#{$image}) (without the quotes) right?
With the quotes it doesn't work for me.

But you could add the quotes right after the normal brace: background-image: url('#{$image}')