WordPress.org

Ready to get started?Download WordPress

Forums

Writr
[resolved] Custom background images - override customizer? (6 posts)

  1. astrachan
    Member
    Posted 4 months ago #

    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

  2. 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!

  3. astrachan
    Member
    Posted 4 months ago #

    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?

  4. 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.

  5. astrachan
    Member
    Posted 4 months ago #

    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;

  6. 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. :-)

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.