sacredpath
(@sacredpath)
Automattic Happiness Engineer
Hi there, this is just a general guess since I cannot see your site and haven’t seen the image you are wanting to use, but this should get you on the way. Just upload the image to the media library and then get the url of that image and replace URL_OF_IMAGE between the quote marks.
.entry-inner .entry-inner-content {
background: url('URL_OF_IMAGE') no-repeat scroll center top / cover;
}
Thanks for the reply sacredpath. Unfortunately it was not yet public cause we have a lot of work to do (recipes to write, pictures to take etc), but i made it public, so you can see it. The thing is we never ever had to work with wordpress, so right now its a lot of experimentation, tests and searching to find what suits us best (and unfortunately neither me or my wife have any advanced coding knowledge lol). So, would you mind telling me where should i go and replace the url of image? Or do i just copy the code and paste it in the additional css of the theme?
Again, thank you so much for your help
I also noticed by making the site public that the mobile version of it has a different blueish color than the nice dark theme the desktop version has. I didnt mess with anything as far as colors go, so i dont know why that happened
sacredpath
(@sacredpath)
Automattic Happiness Engineer
Hi, I’m not seeing a bluish site when I visit on a mobile device, but I suspect you may have had the Jetpack Mobile Theme activated.
The code I gave would be put in at Appearance > Customize > Additional CSS. Delete all the informational text in that window before pasting in the code.
You would want to upload your image to the Media Library on your site and then click on that image in the Media Library and at upper right, you will see the URL. Copy that out and replace the URL_OF_IMAGE in the code.
Sacredpath, thanks for the explanation 🙂 You are right. The blueish mobile version was caused form jetpack (wich i deactivated). I tried the code you provided but it applied the background image only on the front page, and not in the actual posts as well. Plus it’s size on the front page was analog to the length of the text so it didn’t cover the whole thing. Still, thank you for your valuable help. I appreciate it 🙂
Going over our blog, i believe its my fault by not explaining clearly what we want to do with our posts. As i mentioned on the previous post, we need the background image at the post rows on the front page to cover the whole white area and not just the text area. Also we need the content background of our posts to have that specific image as a background, not just the body of the posts.
sacredpath
(@sacredpath)
Automattic Happiness Engineer
Ah, sorry, this will take care of the main page.
.entry-inner {
background: url('https://flippintestblog.files.wordpress.com/2011/02/bg-test1.jpg') no-repeat scroll center top / cover !important;
}
And this will take care of the single post pages.
.single .site-content {
background: url('https://flippintestblog.files.wordpress.com/2011/02/bg-test1.jpg') no-repeat scroll center top / cover !important;
}
