Change Customizr Background to Texture or Image

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:

/* 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”

Comments are closed.