Change Customizr Background to Texture or Image 25


Last Reviewed: 28-Mar-14

Changing the Background to a different color, texture, pattern or image can be made to various elements: Site, Header, Navbar, Body, Footer.

A useful plugin for generating patterns is:

http://wordpress.org/plugins/subtle-background-patterns

Where to copy/paste this code?
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then we strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.

 

Background Color/Texture

Body Color:

 

Body Texture:

 

Header Background

Credit: @AndrewNevins/@dglick

 

Add a Gradient Background
- Change red/blue to required colors

 

Navbar Background

 

Background Image

Header Background Image

 

Body Background Image:

 

Footer Background Image:

 

Where to copy/paste this code?
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then we strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.


About Dave Bardell

My name is Dave Bardell (@rdellconsulting) and have been supporting the Forum since discovering this wonderful Theme. Have learnt a lot from other Supporters (@acub, @tomaja, @ElectricFeet, in particular). Have a library of snippets I've built up which in adding here, I'll try to acknowledge the original contributor but apologies to any I miss or wrongly attribute. daveb@rdellconsulting.com


25 thoughts on “Change Customizr Background to Texture or Image

  • Reply
    Duncan Stewart

    Hi there, love this theme. I’m having an issue with adding transparency to the nav bar – it seems to work well in all major browsers but not IE8 – I think perhaps the gradient code in the primary theme is overwhelming the child theme code…

    I have the following child theme css – have tried using semi transparent images rather than RGB opacity (as you’ll see) but still no joy.

    Any help greatly appreciated. Thanks.

  • Reply
    Jack Thompson

    Sorry, I must be stupid or something…none of these are working for me when I use the Edit CSS thingy…any help is very appreciated :)

    • Reply
      Dave Bardell Post author

      You can’t be as stupid as me :)

      Anyway, I’d suggest the Forum would be a better place to get a solution for this, with a much wider audience to help fix problems. And please include a link to your Site.

  • Reply
    B Wooster

    To answer the question left unanswered above – making the featured pages icons work better with background colors and texture, see this post:

    http://wordpress.org/support/topic/change-background-of-featured-pages-area

    The correct code for a solid color requires using round-div CSS definition for color too:

    If image is used as a background, the hover transition no longer works, but still useful when a texture is desired:

  • Reply
    Azeem Haq

    Just wondering if anyone could help me with the following:

    I need one custom background (it will be a logo) that will not scroll and only the text above it from header – footer will float. How can I do that in custom CSS editor?

    Thanks and much appreciated.

    Reg.
    AZEEM

  • Reply
    Madison

    Hi there,
    I was hoping you could help me with a problem. I am brand new to WordPress and I am using the Customizr theme. I am trying to change the background on my different pages from my menu to have image backgrounds. So I dont want the home page background to change, but just the other pages individually. I’ve tried changing the url to fit this specific page but it isn’t working. Any ideas?

    • Reply
      Kadon

      I would like to be able to do the same thing. I want to have a custom background on all the pages within my site except the home page. According to the CSS documentation, the .home class is supposed to be used on the home page, but this does not seem to be the case. Does anyone know how I can set a background image on every page of my site except the home page?
      Thanks

        • Reply
          Kadon

          Nicolas,
          Thank you for the quick response. I thought that was what I should do, but when I have the code:

          body.home {
          background: none;
          }

          It has no effect. While looking at my front page with google chrome dev tools, I do not see the “home” class being used. The class “blog” shows up. My understanding was that .blog should be for Posts, but since the site I’m working on does not currently use posts, I went ahead and used the following, and it worked:

          body.blog {
          background: none;
          }

          This doesn’t seem like it is the way it should work, based on the documentation, but it seems to be working for my site right now.

  • Reply
    Philip

    Hi There,

    Firstly, love this theme. thanks you guys very much.

    I want to extend the image slider all the way to the top of the page, so the logo and the manual bar will be floating on top of the image.

    Is there a CSS code for this please?

    Thanks so much

  • Reply
    Thierry

    Puisque l’auteur est français… autant causer gaulois :)

    J’essaye le premier exemple ‘body color’, dans blue.css (puisque je suis sous blue) ben… ça fait rien du tout
    (en plus je croyais que style.css prenait le dessus ? mais rien non plus…)

    ? porké ?

    merci

    ===

    I try the first example ‘body color’ in blue.css (I’m in blue) well … dont’ work…
    (style.css? but nothing either …)

  • Reply
    Nicolas

    Hi Thierry, you are right I’m Gaulois :) but this website in English speaking and those comments are a lot more useful when written in English than in French ! :-D

    About the code : I just tried the first snippet in style.css (just pasted it as it is) and it worked fine.
    You might want to refresh your browser cache? that’s the only issue I can find on top of my head…
    Avec plaisir you are welcome!

  • Reply
    Thierry

    Hello,

    Yes F5

    with a old version of Customizr, the first snippet in style.css (just pasted it as it is), change the background (all : header, body, footer…)
    and the second snippet don’t work (my NAMEOFILE.png is OK – I can see, alone, with a browser)
    with a news (3.1.17), only header and footer are red ( first snippet) and the second … always…don’t work
    with custom css, the first work immediatly (All: header, body, footer…) aned the second… the texture don’t work (only the wrapper)

    This question goes through the forums!
    ex : http://www.wordpress-fr.net/support/viewtopic.php?id=95418
    I would like to have this kind of result
    how?

    thank

    • Reply
      Thierry

      argh,
      on the web, custom css work fine
      but in Local with EasyPHP DevServer …color are working but texture don’t work (?)

      sorry

      NB: but style.css / blue.css, etc. No

      • Reply
        Thierry

        Hello,

        So, with custom css, background works well, I set this:

        Is it possible that the round (270 * 250 images) appear on the textured background without white square?
        (home page and possibly News)

        thank you

  • Reply
    edward

    I pasted the change background code to my child theme style.css but it does not work. The style does work because this works;
    body {
    border: 10px solid black!important;
    }

    But his does not work in my child theme css:
    /* Set the color (red) of the body, wrapper, header & footer */
    body, #main-wrapper, header.tc-header, footer#footer .colophon {
    background-color: red;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 10px 10px;
    }

    Help!

Leave a Comment

Your email address will not be published. Required fields are marked *

Do you need to share some code? To display it in a nice looking syntax highlighter, wrap your code between the following tags (css code in this example) : <pre class="lang:css">YOUR CODE</pre> ( possible code language acronyms : css, php, xhtml, javascript, sql)

You may also use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">