[Resolved] insert background

[edefia]

I write to you because I need some help, before you would excuse me for my level of english because I’m french. So I already have got a blog here and I would like to reproduce with generate press the background like a page of paper in the content posts but I don’t know how to do for the top and the bottom. For information I bought generate press premium and I use the plugin “SiteOrigin Css” to modify the css.
Thank you to have read me.

[Adrian Cojocariu]

Depends on what you want to do.

You can just use a better image, like this one, and set it to repeat.

http://www.teacherfiles.com/clipart/xbackgrounds/lined_paper_light.jpg

Or you can delete the background color from the content area completely, in this case it will show “false”, and the white behind it will disappear, showing only the paper background.

[Tom]

^^ What he said 🙂

Basically, set your body background to your image in “Customize > Background Images”, and then delete the colors from your content and sidebar backgrounds in “Customize > Colors”.

That should be it!

[edefia]

Thank you For your answers, but this not exactly that I want to do.
The background of the post in the example link has got three parts, a header where you can find the title of the post, the main part (which is repeated) where you can find the content and the footer.
Can I do the same thing with generate press ?

[Adrian Cojocariu]

You can’t , wordpress doesn’t have a single post header and footer. Why would you want that ? The post already has title content and some “footer” info. Why need to separate them ?

[Adrian Cojocariu]

If you want to use the same background as the one on that site but it’s split in 3, just use paint or pixlr.com to mix the images into a single piece.

[Tom]

Hmm, are you wanting to do that to each blog post? Or the entire content container?

Definitely a tough one..

[edefia]

Tom, I want to do that to each blog post. The idea is that each post is written on a torn sheet like on my actually blog. And I think that I can’t have just one picture on the background because the height of the post adapts to the height of the content.

[Adrian Cojocariu]

Ah I see how, yeah this is a tricky one Tom.

It is because she wants both ends with the paper torn apart, but if she uses a single images it’s no good because you can’t know how long each post is, and the image will repeat badly.

The only idea I have is to use multiple backgrounds, which are 3 in this case.

The first one is the top, the second one is the bottom, and the third one is repeating.

Color the background images to match the background color of the body of the website.

Then add this to your CSS.

.inside-article {
background-image: url(http://ekladata.com/IJgiHjk9Ds0gH9lR0SpnMqsE3ZI.png), url(http://ekladata.com/63E9qxa7Bgv7gnGuOJeWFEpdikk.png),url(http://ekladata.com/K4fFpv-rWO-hpKQT8dyLr1MshoE.png);
background-position: center top, center bottom, center;
background-repeat: no-repeat, no-repeat, repeat-y;
}

You have the top and the bottom backgrounds, and the one repeating under them.

Hope this gets you to it without having to do the header/footer thing.

[Tom]

Great idea using multiple backgrounds like that – awesome! 🙂

[Adrian Cojocariu]

^_^ been through many the past 2 weeks, hope edefia gets it to work for her.

[edefia]

Thank for your answers Adrian and Tom but I don’t know why that doesn’t work.However I added the Css like you tell me (I use my plugin to add the css). And this is what I see.
I don’t know what is wrong.
And when I insert the background with the generate press add-on I can see that.

[Adrian Cojocariu]

Hmmm could you post a link to the site on which you have generatepress so we can see the code ?

Delete the background image from the Customizer, also use backspace to delete the color hex inside the article area so that it shows false.

Then… try using the !important to overwrite any other CSS.

.inside-article {
background-image: url(http://ekladata.com/IJgiHjk9Ds0gH9lR0SpnMqsE3ZI.png), url(http://ekladata.com/63E9qxa7Bgv7gnGuOJeWFEpdikk.png), url(http://ekladata.com/K4fFpv-rWO-hpKQT8dyLr1MshoE.png) !important;
background-position: center top, center bottom, center !important;
background-repeat: no-repeat, no-repeat, repeat-y !important;
}

But mostly a link with the site will help….

Also multiple background seem not to work on some browsers, you should be using the latest version of Chrome/Mozilla on at least a Vista/Win7 OS.

[edefia]

Thank you it was the good solution !

[Adrian Cojocariu]

I’m glad I could help ! ^_^ Good luck

[Author]

Posts