How to add a background image to entire site

Help
1

Hi,

I’m trying to insert a background image that would appear on each page of my site.

I’ve added this line to the _config.yml file:

background-image: url(‘{{ site.baseurl }}/assets/images/bground.jpg’);

to no avail.

I’ve also added this in the main .scss file:

.bgimage {
background-image: url(‘{{ site.baseurl }}/assets/images/bground.jpg’);
}

It didn’t work either.

I don’t have that much experience with Jekyll (or with html syntax, for that matter).

Could you tell what I’m doing wrong and what would be the correct solution.

Thanks!

Andrew

2

Adding to config won’t help.

Adding to SCSS is good. Or even to CSS style tag in your head tag

Your syntax is fine.

Make sure you reference an element on the page

Such as

<body class="bgimage">

...

</body>

Or create an element inside body which is a div with that bgimage class

You also need to set some things like height=100% so the background fills the page and don’t just fill up to the edge of the content.

There are plenty of HTML tutorials out there.

https://www.w3schools.com/howto/howto_css_full_page.asp

1 Like
3

Also look into the relative_url filter as that is best practice rather than baseurl

4

I know you are a beginner but wanted to suggest something even just so you are aware of it and don’t have to use it at this stage of your learning journey.

If you are using Bulma or Bootstrap or other CSS framework then you can avoid writing CSS yourself to handle those intricacies… and just use hero and related classes

See the demo here and scroll below to see the code. Of course will need bulma CSS to be loaded on the page first.

5

@MichealCurrin

Thanks for all these advises. I will look into them in the coming days.

In the meantime, I’ve found a workaround, thanks to this: https://www.w3schools.com/css/css_background_image.asp

I’ve added this piece of code in /layouts/default.html:

<html>
<head>
<style>
body {
  background-image: url('{{ site.baseurl }}/assets/images/bground.jpg');
}
</style>
</head>

</html>

and it works perfectly (since the post layout is based on the default one).

This being said, I’m not sure that such a solution is totally kosher… I would like to have your opinion on this, if possible.

Thanks!

Andrew

6

Setting on body directly like that is fine.
Using a class like you original approach is more flexible in a way - then the CSS can stay the same but you can experiment with adding bgimage to html element or body element or an element inside body.

If you added no CSS besides the lines you shared then that is great. Just note that if you change your layout or theme that your background might no longer cover the full screen.

Also be sure to test your site on a mobile device. The tall screen and wrapping to fit that has caused issues on my sites around text and images.

1 Like
7

This is not Jekyll below but you can still inspect CSS in the browser and use it. Mostly coming from a theme.

https://michaelcurrin.github.io/twitterverse/#/

As food for thought, that uses a cover image which is fullscreen always based on the device but which is fixed at the top of the page when you scroll.

1 Like
8

@MichaelCurrin

Thank you for your valued comments and suggestions!

This page https://www.w3schools.com/html/html_images_background.asp was very helpful so that I can make sure (as you suggested) that the background image I chose (pale yellowish old paper) covers the full screen (especially when one zooms out).
This is the code that does the job (in /layouts/default.html):

<html>
    <head>
    <style>
    body {
      background-image: url('{{ site.baseurl }}/assets/images/bground.jpg');
      background-repeat: no-repeat;
      background-attachment: fixed;  
      background-size: cover; 
    }
    </style>
    </head>

    </html>

Thanks again!
Andrew