Having Two Background Images.

[sbbe2024]

Hello.

I am not even sure if this would make any sense, but would it be possible to load two background images? One to be used for the home page like this (https://sbbe2024.github.io/) & another to be used anywhere else like here (https://sbbe2024.github.io/Local%20do%20Evento/). As far I understand, at the moment the same background image is used across all subpages but maybe it would make sense to have this distinction?

What do people think?

Thanks a lot in advance, George.

[sbbe2024]

Sorry -- I think there is no need for this. The header can be modified in this way:

{% assign image = page.header | default: site.header | relative_url %}
{% assign dark = page.header-dark | is_nil: site.header-dark | is_nil: true %}

{% assign svg = "images/logo.svg" | file_exists %}
{% assign png = "images/logo.png" | file_exists %}
{% assign jpg = "images/logo.jpg" | file_exists %}
{% assign logo = svg | default: png | default: jpg | default: nil %}

<header
  class="background"
  style="--image: url('{{ image }}')"
  {% if dark == true or dark == false %}
    data-dark="{{ dark }}"
  {% endif %}
  {% if page.url == "/" %}
    data-big
  {% endif %}
>

<a href="{{ "/" | relative_url }}" class="home">
  {% if page.url == "/" %}
    {% if site.logo-text != false %}
      <span class="title-text" data-tooltip="Home">
        {% if site.title and site.show-title != false %}
          <span class="title">{{ site.title }}</span>
        {% endif %}
      </span>
    {% endif %}
  {% else %}
    {% if logo %}
      <span class="logo">
        {% if svg %}
          {{ svg | file_read }}
        {% else %}
          <img src="{{ logo | relative_url }}" alt="logo">
        {% endif %}
      </span>
      {% if site.subtitle and site.show-subtitle != false %}
        <span class="subtitle">{{ site.subtitle }}</span>
      {% endif %}
    {% endif %}
  {% endif %}
</a>

  <input class="nav-toggle" type="checkbox" aria-label="show/hide nav">

  <nav>
    {% assign pages = site.pages
      | where_exp: "page", "page.nav"
      | sort: "nav.order"
    %}
    {% for page in pages %}
      {% if page.nav %}
        <a
          href="{{ page.dir | relative_url }}"
          data-tooltip="{{ page.nav.tooltip }}"
        >
          {{ page.title }}
        </a>
      {% endif %}
    {% endfor %}
  </nav>
</header>

[vincerubinetti]

This was already possible without modification. See this page of the docs:

https://greene-lab.gitbook.io/lab-website-template-docs/basics/edit-pages

[sbbe2024]

Thanks a lot!

To be honest, I think my problem is another. I would like to push the navigation links downwards (pink line) but it seems that the padding is somehow connected to the backdown image so in the end I only get more blue space :( May I ask if you would see an easy way of achieving this? I have tried a couple of approaches but nothing really worked.

Many thanks in advance, George.

[vincerubinetti]

The background images are set to object-fit: cover. See this explanation:
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

This is necessary because there are all sorts of different device/screen sizes that could change the size of the header, and without it, there could be gaps of empty space.

What (I think) you're trying to achieve isn't readily possible with the template.

What might work is adding this right under the end of the opening <header> tag in _includes/header.html:

{% include figure.html image=image width="100%" %}

Then you would need to set the background color of the header element in _styles/header.scss to match the image so the color is continuous.

Then there is still one more problem. You will notice that the header is "sticky" on pages other than the homepage (it stays at the top of the screen even when you scroll down). If you were to do the design you suggest on those other pages, it would be miserable for the user. So you should also limit it to just the home page:

{% if page.url == "/" %}
   {% include figure.html image=image width="100%" %}
{% endif %}

Then you'll also have to hide the normal method of showing the background image when doing your alternate method:

{% if page.url != "/" %}
  style="--image: url('{{ image }}')"
{% endif %}