Making .b-top-background_header-mainnav transparent

[glennrocksvb]

When I tried to replace your background image with mine in the inspector, I saw this:

[Snowhog]

Okay. What looks to be happening, is that the background image I'm using; any that I select; is being presented on the page differently when viewed 'normally' or through Inspector.


The left side of the image above is what one sees 'normally'. Note that the Earths upper atmosphere (lower red line) is much lower than when viewed through Inspector (right side of the image).

The image dimensions of the image are 2047 × 1150.

background: url("core/images/misc/Sun_glint_on_the_Caspian_Sea.jpg") no-repeat center fixed;
background-size: cover;​

So how do I get the background image to be shown as it is when viewed in Inspector?

[glennrocksvb]

The background image adjusts based on the browser viewport dimensions. That's what background-size: cover does.

If you want the earth' to peek through the header section, then you can position the background image a little higher to offset the black space by changing the background to this:

background: url("core/images/misc/Sun_glint_on_the_Caspian_Sea.jpg") no-repeat 0 -150px fixed;

The -150px in the code is the vertical position of the image relative to the top edge of the image. Negative values means you are moving the image upwards.

Or you could also edit the image and crop the top portion to minimize the black space and then keep the original CSS code.

[glennrocksvb]

I just realized repositioning the background image upwards is not a good solution. It creates a missing portion of the image at the bottom in the footer. Cropping the image is a better solution.

[Snowhog]

Thanks. I've already come to the realization that the size of the image used plays a significant part here. I went through the other background images I have, and they all show through in b-top-background__header-mainnav. but all the other images have actual image content throughout; no black space like this one image does. That said, it appears that in normal (non-Inspector) viewing, the black area at the top of the image is bigger in height than what is in the actual image. Maybe just an illusion on my part.

No matter. My interest was in assuring that background image content would be visible through b-top-background__header-mainnav, and it is. So I'll not make any special tweaks just to satisfy me personally.

Thank you very much for the time looking into this and ultimately, helping me understand (a little better) what is happening.

[Snowhog]

Cropping the image is a better solution.

And I actually came to that consideration too; for this particular image. But that brings me to this question: What is the optimal image size (if there is one) for use as a background image?

[Snowhog]

Cropped the image. Now "I" see what I want in this background image.

[glennrocksvb]

But that brings me to this question: What is the optimal image size (if there is one) for use as a background image?

I'd go with at least 1920 wide.

The most popular screen resolution is 1920x1080 based on this global stats:

https://gs.statcounter.com/screen-resolution-stats

Btw, thanks for the coffee overload ☕☕☕

[glennrocksvb]

I also recommend compressing the image to reduce file size.

I use this tool:

https://imagecompressor.com/

It reduces file size with reduced quality but it's hardly noticeable.

[Snowhog]

Thanks. I’ll check it out.

[Snowhog]

And now with a background image I really like!

[glennrocksvb]

That's cool!