Fixed, centered background image in the free version

Resolved Relja
(@relja)

5 years, 5 months ago

Is there a way to add (set) a background image to the free version of GeneratePress?

I have tried using the Additional CSS and the following code, but it didn’t work:

body {
background-image: url( ‘https://www.mywebsite-say_example.com/wp-content/uploads/2018/10/background_image.jpg’ );
background-size: cover;
}

Viewing 9 replies - 1 through 9 (of 9 total)

Theme Author Tom
(@edge22)

5 years, 5 months ago

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

Thread Starter Relja
(@relja)

5 years, 5 months ago

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/
Thread Starter Relja
(@relja)

5 years, 5 months ago
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 5 years, 5 months ago by Relja. Reason: marked as resolved - thanks! :)
- This reply was modified 5 years, 5 months ago by Relja.
Theme Author Tom
(@edge22)

5 years, 5 months ago

Awesome! Glad you got it all working 🙂

pradeepphule
(@pradeepphule)

5 years ago

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.

Bike Gremlin
(@bikegremlin)

5 years ago

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.

pradeepphule
(@pradeepphule)

5 years ago

Hi @bikegremlin,

Yes, I have tried the css pasted above.

It is not working.
Theme Author Tom
(@edge22)

5 years ago
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');
}
```
bendingcolors
(@bendingcolors)

4 years, 10 months ago

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(http://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…

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Fixed, centered background image in the free version’ is closed to new replies.

Tags