Support » Theme: Writr » Custom background images – override customizer?

  • Resolved astrachan



    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?



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


    Automattic Happiness Engineer

    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!

    Hi Kathryn,

    Yes I mean particular pages.

    So – the site has this background image:

    But I might want this page to have a different one:

    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


    Automattic Happiness Engineer

    Yep, you’re close. Try something like this: {
    	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.

    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


    Automattic Happiness Engineer

    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.