Add background image to hook area

[mikeb82]

I’m converting a website from an old theme to GeneratePress. Everything was going well until I encountered a roadblock. I need to add a fixed background image to the top right of the screen. I tried targeting the .site-header class with CSS without success. Is there a hook area between the body and the header I can use for this?

Note: I also tried to add the image using elements by creating a div class with the background image. Only portions of the image were displayed.

Thanks

[David]

Hi there,

do you still have the old site so we can see what you’re trying to achieve?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[mikeb82]

Yes, it’s https://ccccccc.com

It’s the falcon at the top right of the screen.

[David]

You can actually set multiple background images on an element like so:

body {
    background-image: url('url-two-foreground-image'),url('url-two-background-image');
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
    background-position: right top, right top;
    background-size: auto, cover;
}

Make sure the Falcon image ( foreground ) is the first URL.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[mikeb82]

Thanks David,

Your solution does exactly what I needed to do.

Thanks again!

Mike

[mikeb82]

Resolved

[David]

Glad to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts