background image not visible

You don’t have a sample page that we can inspect, instead of your own local computer? It would be very difficult for us to diagnose something that we couldn’t inspect directly, just by looking at the small snippet of code & CSS. The only thing I can see offhand is that in your CSS, you have a rule for a #fixed element, but I don’t see an element with that ID, only a class of fixed-background.

could it be that you are commenting out the image?

/*    background-image: url('../img/computers.png');  */

Hello,

Without to see how the site react its a little bit difficult in that case …

But when i get you right you just want a landig page image !?
So a backgroundimage over the complete viewport ?

When i am right you should anchor it in the head section of your site.
Or much easier simply use the html::before css selector for it.

This should give you a background image over/behind the whole Site:

html::before {
content: ' ';
display: block;
background-image: url(background.jpg);
background-position: center center;
background-size: 100% 100%;
background-repeat: no-repeat;
height: 100vh;
width: 100vw;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: fixed;
z-index: -10; // This is pretty important.
}

Greetings
Patrick

Hello,

Sorry i am in work so my answer may be is a little bit short …
(Cant explain it in the detail at the moment)

The good news:
Now i see what you want do to 🙂

The bad news:
The images in this case are not simple background images there is a little bit more css behind them.

My english is not the best but i try to explain whats going on:
In your case to keep it simple we have in the basic 3 types of div layers.
1. Text with no background (you can look through)
2. Text with background color (you cant look through)
3. A Image Div.

The Image Div is fixed in the background.

The other layers lay on top (over the Image div) and they are scrollable.

Text with background color
Text with no background
Text with background color

So now if you scroll the divs in front you can see the fixed backgorund image through the divs with no background color.

Just like:
Take a piece of paper cut a square in it.
Now take a image and put the paper on top of it.
Slide the paper up and down …

As I said i cant explain the code side at the moment but try this:

open the main.css
search for .home-inner and replace it with:

.home-inner {
    background-image: url('../img/computers.png');
}

open the fixed.css:
search for .home-inner and replace it with:

.home-inner {
 position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}

Now you should see the backgroundimage.

Greetings
Patrick