Trouble with bg image option (9 posts)

  1. BoOrisTheBlade
    Posted 1 year ago #

    It seems it doesn't let me upload another image, I just uploaded one?

    Also, I would like to have different bg images for different pages, how can I achieve that? Thanks.

  2. You can set different background images for different pages through CSS.

    First, find the unique class for each page or post. You can do that by looking at the body tag in the browser's source code for each page or post.

    For example, page-id-268 might be one unique page ID class, and you can target its background image like this:

    .page-id-268 {
    background-image: url('http://path/to/your/image.png') !important;

    Change the image URL to match your particular image path.

    You can add as many images as you like directly in your Media Library.

    Don't edit the theme directly or your changes will be overwritten the next time you update the theme.

    An easy way to add custom CSS like this is to install the Jetpack plugin and activate the Custom CSS module. You could also install a standalone custom CSS plugin, or create a child theme.

    Let me know how it goes!

  3. BoOrisTheBlade
    Posted 1 year ago #

    Thanks for replay. I still cant target specific page. If I look at code it says something like this: class="page page-id-5 page-template-default logged-in admin-bar custom-background custom-background-size sidebar-closed customize-support"

    I suppose I should go with .page-id-5 .custom-background:... and I tried couple of things but none of them work :(

  4. Did you try the format I provided above? For page-id-5 the format would be:

    .page-id-5 {
    background-image: url('http://path/to/your/image.png') !important;

    Could you try adding this to your CSS and provide a link to your site so I can have a look directly and see what's going on? Thanks.

  5. BoOrisTheBlade
    Posted 1 year ago #

    Im doing it locally. I installed that plugin you mentioned, for CSS editing, its working quite well. But that specific thing isn't. I am going to try again tonight, put that exact line you mentioned.

  6. BoOrisTheBlade
    Posted 1 year ago #

    Alright, it seems it does something, it changes its default bg but instead of the new image I get the preset color(greenish one) It seems the command is good but I'm not pointing at the image correctly?

    I put images in img folder that is located in writr folder(theme folder) The image is in jpg format, 968kb. So I put this:

    .page-id-5 {
    background-image: url(../img/pozadina_02.jpg) !important;
    } but it doesn't work...any suggestions? You already helped a lot, im kinda new to all this stuff, sry if I bother you needlessly :)

  7. You need to specify a full path to the image, starting with http:// as in the above example. (If you're working on localhost or an IP you'll need to remember to change this path when your site goes live.)

    Let me know how it goes.

  8. BoOrisTheBlade
    Posted 1 year ago #

    Hi its me again. I successfully changed the picture but it messes up my other settings. I put
    #page:before {
    opacity: .7;
    background: #020526;

    in css editor and it works great for home page, but when I click on the page with changed bg, it somehow overrides the effects. Any idea how to make those settings work on all pages? I also tried .page-id-5#page:before but to no use...

  9. I'm not sure what you're trying to accomplish with the CSS above, and since you can't provide a link to your site it's difficult to help with this, especially without screenshots of what's "messed up."

    Once your site is up on a test server where I can have look at I'd be glad to have another peek!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic