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.

Thank you for the quick response.
I will pull the info together tomorrow and post it on the forum.
Once again thank you for showing an interest in my proble.
John K

could it be that you are commenting out the image?

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

Greeting,
I commented out the link and added color of gray to see if that would show.
Thank you for your response.
I am in the process of moving the site to my server so people can get a look see.
John

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

I just looked closer on your code example ….

If you want the backgroundimage span the section given in html like:
<!– Start of Landing Page Image –>
<!– End of Landing Page Image –>

You should hook the image to the landing and not to the home-inner class …

See here

You people are great.
I am in the mist of moving it to my other website so we can get a better look.
I should be done moving today.
I will make the changes also.
Thx again. John K

Greetings to All!!

There is pieces of my new website at https://www.thewordproofer.com with errors yet to be resolved.
With Edge, I found that I had to click on Contact to get the screen to come up.
If you scroll down the page you will see that other sections have a background image.
I will appreciate any suggestions and Thank You for your time.
John K

My 1st project will be to fix the navbar!!

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

Thank you! Thank you!!
I actually found the “display: block” in two places and deleted both of them.
Both main.css and fixed.css have been changed and the screen now shows the background-image.
Thanks again for your help.
John K