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:
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:
/* START OF Change Customizr Background to Texture or Image */
/* Set the color (red) of the body, wrapper, header & footer */
body, #main-wrapper, header.tc-header, footer#footer .colophon {
background-color: red;
}
/* END OF Change Customizr Background to Texture or Image */
Body Texture:
/* START OF Change Customizr Background to Texture or Image */
body {
/* Adjust the Image location (wp-content/uploads/NAMEOFFILE.png) */
background: url(/wp-content/uploads/NAMEOFFILE.png) repeat ;
}
/* Set the color (#FAFAFA) of the internal wrapper */
#main-wrapper {
background: #FAFAFA;
}
/* END OF Change Customizr Background to Texture or Image */
Header Background
/* START OF Change Customizr Background to Texture or Image */
header.tc-header {
/* Adjust the (red) background color */
background-color: red;
/* Adjust the border (top/bottom + left/right) style/color */
border: 10px 10px solid red;
/* Adjust the (red) top border style/color */
border-top: 10px solid red;
/* Adjust the (green) bottom border style/color */
border-bottom: 10px solid green;
}
/* END OF Change Customizr Background to Texture or Image */
Credit: @AndrewNevins/@dglick
Add a Gradient Background
– Change red/blue to required colors
/* START OF Change Customizr Background to Texture or Image */
/* Adjust to Gradient Background */
header.tc-header {
background-image: -moz-linear-gradient(top, red, blue);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));
background-image: -webkit-linear-gradient(top, red, blue);
background-image: -o-linear-gradient(top, red, blue);
background-image: linear-gradient(to bottom, red, blue);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='red' , endColorstr='blue' , GradientType=0);
}
/* END OF Change Customizr Background to Texture or Image */Note: Because of the presence of quotes (‘) in the filter property you can’t paste anymore the above CSS code in the Custom CSS box, due to new wordpress theme guidelines. You have to paste it in your child-theme style.css
Navbar Background
/* START OF Change Customizr Background to Texture or Image */
header.tc-header {
/* Adjust the Image location 'wp-content/uploads/NAMEOFFILE.png' */
background: url(/wp-content/uploads/NAMEOFFILE.png) repeat 0 0;
}
/* END OF Change Customizr Background to Texture or Image */
Background Image
Header Background Image
/* START OF Change Customizr Background to Texture or Image */
header.tc-header {
/* Adjust the Image location 'wp-content/uploads/NAMEOFFILE.png' */
background: url(/wp-content/uploads/NAMEOFFILE.png) repeat 0 0;
}
/* END OF Change Customizr Background to Texture or Image */
Body Background Image:
/* START OF Change Customizr Background to Texture or Image */
body {
/* Adjust the Image location 'wp-content/uploads/NAMEOFFILE.png' */
background: url(/wp-content/uploads/NAMEOFFILE.png) repeat 0 0 ;
}
/* Set the color (#FAFAFA) of the internal body */
#main-wrapper {
background-color: #FAFAFA;
}
/* END OF Change Customizr Background to Texture or Image */
Footer Background Image:
/* START OF Change Customizr Background to Texture or Image */
footer#footer .colophon {
/* Adjust the Image location 'wp-content/uploads/NAMEOFFILE.png' */
background: url(/wp-content/uploads/NAMEOFFILE.png) repeat 0 0 ;
}
/* END OF Change Customizr Background to Texture or 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.
46 thoughts on “Change Customizr Background to Texture or Image”
How can I change the background color only outside the box?
Please open a new thread about this in the Customizr forum : https://wordpress.org/support/theme/customizr
This is where our team addresses all Customizr theme’s requests and issues.
Before opening a new topic, I’d recommend following the troubleshooting steps documented on this topic : https://wordpress.org/support/topic/troubleshooting-tips-for-customizr-theme/
I just found this after I submitted a request 🙁 Oh well. Is there a video I can watch to help me learn and action this quickly pls? Thanks
BTW your login using the Customizer pro login doesn’t work. Once I login it goes straight to your sales page and doesn’t do squat to this page in terms of logging in.
Luke
Hi,
Do you mean logging into the Pro support forum?
Hi,
Is there any way to make the main wrapper transparent or translucent?
I tried:
#main-wrapper, .colophon {
background-color: #transparent;
}
But it just makes it white. I would love to be able to see a faint version of the static background picture through the main body.
Hello
changes worked perfectly for me, thank you.
A small matter anyway ^^: is it possible to change the background color of the pages and articles without affecting the site background?
thank you in advance
seb
Hi sebastienb,
The developer team handles support for Customizr at https://wordpress.org/support/theme/customizr and for Customizr-Pro at http://presscustomizr.com/support/. Please post your query there with a link to your site.
thanks
Hi,
Do not use
background: http://hellovitamin.com(/wp-content/uploads/Header_BlogHelloVitamin.png) repeat 0 0;
But change to
background: url(/wp-content/uploads/Header_BlogHelloVitamin.png) repeat 0 0;
Hi, I have few questions on changing the header (uploading a new picture as header image).
I already activate the child theme, therefore I have Advanced Option > Custom CSS where I can paste the given code as above.
I assumed only row 4 to be changed
from this
background: url(/wp-content/uploads/NAMEOFFILE.png) repeat 0 0;
to this
background: http://hellovitamin.com(/wp-content/uploads/Header_BlogHelloVitamin.png) repeat 0 0;
_____________________________________________________________________
/* START OF Change Customizr Background to Texture or Image */
header.tc-header {
/* Adjust the Image location ‘wp-content/uploads/NAMEOFFILE.png’ */
background: http://hellovitamin.com(/wp-content/uploads/Header_BlogHelloVitamin.png)
repeat 0 0;
}
/* END OF Change Customizr Background to Texture or Image
______________________________________________________________
but nothing happens.
Can anyone help me on this?
Thank you in advance.
I tried all supplied examples and they work fine except the navbar background.
It seems to me that another class should be used. I already tried classes navbar, navbar-inner and navbar-wrapper to no avail to set a background within the navbar. What should the correct code be?
And BTW the link to the WP plugin for generating patterns is incorrect. Can this be fixed?
Found the correct code to set the navbar background:
/* START OF Change Customizr Background to Texture or Image */ .navbar-inner { /* Adjust the Image location 'wp-content/uploads/NAMEOFFILE.png' */ background: url(http://c2f90ac515cad510ffe3-31810616509b4c36b00a57fb7eadaf48.r36.cf1.rackcdn.com/wp-content/uploads/NAMEOFFILE.png) repeat 0 0; } /* END OF Change Customizr Background to Texture or Image */I followed your instructions for Header Background Image, but i think my image is bigger than what actually the header is. My image is 5125 * 700. How can i see the whole image?
Hi,
Just tried to use this plugin, but it doesnot work.
I only see 2 patters by the customize.
No way to get ore patterns to be seen.
http://wordpress.org/plugins/subtle-background-patterns
Cheers!
Can you add a background image to the sidebar?
I can’t adjust paddin-right on my page. I used code
/* Set the color (#FAFAFA) of the internal wrapper */ #main-wrapper { background: #FAFAFA; margin-top: 0px; margin-bottom: 0px; padding: 10px 10px;and I got strange effect. Could somebody check my page please and tell me what can I do?
You need a comma – 10px, 10px
Hi
I tried to use this snippet to add a background image across the header, however I don’t see the image. Instead it overwrites the previous color combination I selected. Any help / pointers will be greatly appreciated. Here is the code I’m using:
header.tc-header {
background: url(/wp-content/uploads/2015/02/sky_1400_403.jpg) repeat 0 0 ;
}
Hi, thanks for the response, yeah, thanks! Sorry for do not close my request.
Thanks Guys!
Angelo
Hi, i use the css to change the background color but the three circles bullet of the home page arent transparent so i can see the square containing it, it there a way to set the bullet circle background to transparent?
/* 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; }Thanks
Hi, apparently you managed to solve this problem on your website.
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!
Anyone?
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
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
Hello,
So, with custom css, background works well, I set this:
body, header.tc-header, footer#footer .colophon { /* Adjust the Image location (wp-content/uploads/texture.jpg) */ background: url(/wp-content/uploads/texture.jpg) repeat ; }Is it possible that the round (270 * 250 images) appear on the textured background without white square?
(home page and possibly News)
thank you
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 ! 😀
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!
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 …)
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
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?
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
Hi Kadon, you can set it your background on all pages and specify a ‘none’ value for home.
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.
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
Azeem, 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.
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:
.round-div { border: 104px solid #beb; }If image is used as a background, the hover transition no longer works, but still useful when a texture is desired:
body { background: url(seamlesstexture.jpg) repeat ; } .navbar-inner { background: url(seamlesstexture.jpg) repeat ; } .round-div { border-image: url(seamlesstexture.jpg) 0 0 repeat ; } .thumb-wrapper { border-radius: 900px; }Thanks for this feedback @B Wooster
Refreshed this Snippet, including Footer
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 🙂
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.
Any thoughts on how to change the color of the background on the featured pages?
I’d suggest the Forum would be a better place to get a solution for this, and include a link to your Site.
Thanks for using Customizr.
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.
/* Theme Name: Customizr Child Theme URI: http://www.mistyflip.com/sites/wanakagc Description: My description Author: Duncan Stewart Author URI: http://www.mistyflip.com/ Template: customizr Version: 1.0.0 */ /* Add a full screen background */ body { background: url("http://mistyflip.com/sites/wanakagc/wp-content/uploads/2013/11/wanakagc_fullbg.jpg") repeat fixed 0 0 ; color: #FFFFFF; } /* Set the color (#FAFAFA) of the internal body */ #main-wrapper { background-color: transparent; margin-top: 10px ; margin-bottom: 10px; } header.tc-header { background: url("http://mistyflip.com/sites/wanakagc/wp-content/uploads/2013/11/whitetrans50.png") repeat; border-bottom: 0; } .container { background: url("http://mistyflip.com/sites/wanakagc/wp-content/uploads/2013/11/blacktrans30.png") repeat; /*padding: 10px;*/ } .entry-content { padding: 10px; } .navbar-inner { background: transparent url("http://mistyflip.com/sites/wanakagc/wp-content/uploads/2013/11/blacktrans30.png") repeat fixed 0 0; } .navbar .nav > li.current-menu-item > a, .navbar .nav > li.current-menu-ancestor > a, .navbar .nav > li > a { color : #FFFFFF; text-shadow: 0 1px 0 #333; } footer#footer, footer#footer .colophon { background: transparent; border-top: 0; } footer#footer .colophon a, footer#footer .colophon p { color: #ffffff; } /* Adjust the Slider Height */ #customizr-slider.carousel .item { height: 300px; min-height: 300px; line-height: 300px; }Is it possible to change the colors of the sidebars?
Sorry for delay in replying. I’d suggest the Forum would be a better place to get a solution for this, and include a link to your Site.
Thanks for using Customizr.
Thanks the quick reply! I tried the plugin from the texture homies and my previous precipitations waxed copacetic! Mercy bookoo miss-yer!!!