[Resolved] No Repeat on Background image covering whole container

[Brent]

Hello –

I’ve installed a background image covering the whole site container using hooks and it works great. However, the image is repeating. Can you tell me how to have it “cover” rather than “repeat” as I’m using hooks?

In addition – is there a way to use a background overlay for the entire image?

Thank you!

[David]

Hi there,

try this CSS:

.full-container {
    background-image: linear-gradient(0deg, rgba(255, 0, 0, 0.3), rgba(255, 0, 0, 0.3)),url(http://ryanc195.sg-host.com/wp-content/uploads/2021/11/oie_P76NcKdUA3co.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

Notice the linear-gradient(0deg, rgba(255, 0, 0, 0.3), rgba(255, 0, 0, 0.3)) property. Just set both the rgba values to your color.

[Brent]

Thanks David!

Final question. Is it possible to make the background container image sticky?

Thanks for the help!

[Ying]

Not sure what you mean by sticky, give this line a try 🙂
background-attachment: fixed;

You can add it to David’s CSS:

.full-container {
    background-image: linear-gradient(0deg, rgba(255, 0, 0, 0.3), rgba(255, 0, 0, 0.3)),url(http://ryanc195.sg-host.com/wp-content/uploads/2021/11/oie_P76NcKdUA3co.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

[Brent]

Hi Ying –

What I meant – is to have the background image stay in place while the contents of the site scroll on top of that image.

I added the css you provided, but I think maybe I was not clear in what I’m asking?

Does that make sense – I’d like the background image on all pages to stay fixed while you scroll down the page?

Thanks for the assistance.

[David]

The code that Ying provided will fix the image as you require on Desktop devices.
But not on Mobile devices as they disable fixed backgrounds due to high CPU expense of them.

If you want it fixed on all devices try this CSS instead:

.full-container {
    position: relative;
}

.full-container:before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(0deg, rgba(255, 0, 0, 0.3), rgba(255, 0, 0, 0.3)),url(http://ryanc195.sg-host.com/wp-content/uploads/2021/11/oie_P76NcKdUA3co.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;
}

[Brent]

Hi David –

Thanks for the reply – on a Saturday even!

I’ve added that css – however the background does not seem to be fixed in place? As I scroll, it scrolls along with the content and then on the “Work” page, I also see the background image repeating.

Thanks again

[David]

In your Customizer > Additional CSS.

1. Remove this:

.full-container {
    background-image: url(http://ryanc195.sg-host.com/wp-content/uploads/2021/11/oie_P76NcKdUA3co.jpg);
}

2. Move the CSS i provided to the top ie. where #1 was.

[Brent]

Hi David –

Can I retain the footer bar at the very bottom?

Thank you

[David]

Made a slight tweak to the CSS here:

https://generatepress.com/forums/topic/no-repeat-on-background-image-covering-whole-container/#post-1993998

for reference i added the z-index: -1; property.

[Brent]

Thanks David – excellent support from your entire team!

[David]

Glad we could be of help!

[Author]

Posts