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???

[ghost]

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}')

[thibmart1]

Hi, is there by any chance a way to achieve the same result without having to do it with sass?

This solution works only if you have only one image you want to render on the hero background, but how do you get to this when you have several HTML pages with a hero (and a navbar) and you want a specific image for each pages (and set it up dynamically if possible) ?

If some CSS wizard come to a solution let me know!

[digitigradeit]

The only other way to add a background image to a hero would be to use an inline style="" attribute, which removes the CSS requirement for all background-related properties.

You have a couple options.

Option 1 -- using the background: property which is short hand for background-image, background-size, etc. More info here: https://developer.mozilla.org/en-US/docs/Web/CSS/background

<div class="hero is-fullheight" style="background: center top/cover url('https://source.unsplash.com/random/1920x1080/');">
  <div class="hero-head"></div>
  <div class="hero-body"><div class="container is-fullhd"><div class="content"><h1>Hero w/Background</h1></div></div></div>
  <div class="hero-foot"></div>
</div>

Option 2 -- This will make the html a little longer (which may or may not be a concern), indicate each of the background-related properties individually in the style="" attribute.

For a background to show you need a minimum of background-image, background-size and background-position indicated.

<div class="hero is-fullheight" style="background-image: url('https://source.unsplash.com/random/1920x1080/'); background-position: center top; background-size: cover;">
  <div class="hero-head"></div>
  <div class="hero-body">
    <div class="container is-fullhd">
      <div class="content">
        <h1>Hero w/Background</h1>
      </div>
    </div>
  </div>
  <div class="hero-foot"></div>
</div>

Probably worth also noting that content inside the hero is partially controlled by the hero color specification, so if you use the style="" attribute in conjunction with class="is-primary is-fullheight", etc... it makes it considerably more difficult to get the colors to offset the background color of the image (which usually has lots of colors).

Similarly text colors are controlled via their inline properties too, which also presents additional challenges.

<div class="hero is-danger is-fullheight" style="background-image: url('https://source.unsplash.com/random/1920x1080/'); background-position: center top; background-size: cover;">
  <div class="hero-head"></div>
  <div class="hero-body">
    <div class="container is-fullhd">
      <div class="content">
        <h1 class="title">Hero w/Background</h1>
      </div>
    </div>
  </div>
  <div class="hero-foot"></div>
</div>

Codepn should you want to test out the code above: https://codepen.io/digitigradeit/pen/NWeayaW

[thibmart1]

Thanks a bunch @digitigradeit, it works like a charm!