• Resolved astrachan

    (@astrachan)


    Hi

    My client has asked if she can have particular background images on one section of the site. I would normally set this a the page template, but with this theme the Customizer sets the background image so I’m not sure how to override, or modify, that.

    Any tips?

    Thanks

    Alistair

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator Kathryn Presner

    (@zoonini)

    Hi Alistair, could you give me a few more specifics about what you’re trying to do?

    When you say “one section of the site” do you mean a particular page or category, for example?

    You can target the background of specific pages, posts, categories, tags, etc. with CSS. I can help you with the code, but I’ll need to know more about what your goal is.

    If you have a link to the site in progress, all the better. Thanks!

    Thread Starter astrachan

    (@astrachan)

    Hi Kathryn,

    Yes I mean particular pages.

    So – the site has this background image: http://silviamercuriali.com/site/

    But I might want this page to have a different one: http://silviamercuriali.com/site/projects/autoteatro/etiquette/

    Now you’ve mentioned CSS I can guess how it might be done – something like:

    .page-id-2 {
    background-image: url(images/blahblah.jpg);
    background-repeat: repeat;
    }

    Would that be it?

    Moderator Kathryn Presner

    (@zoonini)

    Yep, you’re close. Try something like this:

    body.page-id-2 {
    	background-color: #xxxxxx;
    	background-image: url("http://full/path/to/your/image.png");
    	background-repeat: repeat;
    }

    I tested that here and it works. Let me know how it goes.

    Just a heads-up: don’t edit the theme files directly, otherwise your changes will be overwritten when the theme is updated.

    An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

    As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.

    Thread Starter astrachan

    (@astrachan)

    Thanks Kathryn. It worked for me, though I needed to put an !important on to get it to work:

    background-image: url("http://full/path/to/your/image.png") !important;

    Moderator Kathryn Presner

    (@zoonini)

    Cool, glad you got it working.

    though I needed to put an !important on to get it to work:

    That’s because you didn’t add the CSS in one of the ways I recommended above – child theme or CSS plugin – it looks like you edited your style.css file directly. Please keep in mind that the next time you update the theme, all your CSS changes will be overwritten. It’s good practice not to edit your theme files directly, as I mentioned above. 🙂

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Custom background images – override customizer?’ is closed to new replies.