Fixed, centered background image in the free version

That CSS should work. Any chance you can link me to your site so I can see why it isn’t?

bikegremlin.com – the website is in Serbocroatian.
The english website version uses a different theme and that’s the look I’m trying to achieve (separate WordPress installation in the bike.bikegremlin.com subdomain).

The reason for trying the GeneratePress is all the good reviews and recommendations in terms of speed (and stability). The website is non-profit, info, about bicycles, but I’ve listed all the setup I’ve done (plugins used, and all the rest) in a couple of posts at this link (for my reference primarily), if that’s of any help:
https://bike.bikegremlin.com/category/gremlin-in-action/it-section-computers-internet/

OK, it was my mistake – already placing donkey ears on my head. ??
And your reply was very helpful, the sentence “That CSS should work”, coming from the theme author was enough to turn me towards finding out what I did wrong, not looking for other solutions. Thank you. ??

The apostrophe signs I copy-pasted were not the correct ASCII characters. I had used these: ‘

Instead of these: ‘

OK – with the forum font, they look exactly the same, but a copy/paste to a different text editor shows the difference.

I case anyone else has a similar problem, the final working solution (viewed source code of the theme that allows in-theme background image setting and positioning) is the following, Additional CSS within GeneratePress appearance settings:

body {
background-image: url( ‘https://www.example.com/wp-content/uploads/2018/10/background_image.jpg’ );
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

First line gives the image address, while the rest is formatting. This setup is a fixed background with no background image scrolling with text scroll.

Fixed the website logo icon to stay in-line with the website name, not below it, again, using Additional CSS:

.site-branding{
display: inline-grid;
}
.site-logo{
float: left;
margin-right: 20px;
}

• This reply was modified 6 years ago by Relja. Reason: marked as resolved - thanks! :)
• This reply was modified 6 years ago by Relja.

Awesome! Glad you got it all working ??

Hi @edge22,

I am trying to add page background image to my website. As you said I have added full-container div and trying to set background image to that div. Still it is not working.

Any suggestion.

Thanks.

Have you tried css code I posted above?
Either entered in “Additional CSS” within the theme, or, better, using style.css from within a child theme.

Hi @bikegremlin,

Yes, I have tried the css pasted above.

It is not working.

How are you adding the full container div? Is that the class name of the element?: .full-container

If so, you’d do this:

.full-container {
    background-image: url('URL TO IMAGE');
}

There is a way to do it : :

1- Create a Div, after header div, independant from your content div, and call it “image-hero-area” :
<div class=”image-hero-area” bis_skin_checked=”1″>
</div>

2. Add the following css in your stylesheet :

.image-hero-area {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
margin: 0;
background: url(https://suono.fr/wp-content/uploads/2018/11/testle?lekszellem.jpg) center center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

works fine…