Add background image BEHIND slider on static front page

  • Resolved Chris

    (@curbano1972)


    11 years, 3 months ago

    I am able to change the background color using the Custom CSS:

    body {
background:  red;
}

    but no matter how many different ways I tried to add a background image, it will not work; with or without the slider enabled.

    I created an “images” folder under customizr for this code:

    body {
background: url(./images/zMyBanner.png);
}

    or 

    body {
  background: url('/wp-content/uploads/zMyBanner.png') repeat fixed 0 0 #FAFAFA !important ;
  color: #5A5A5A;
  padding-bottom: 0;
}

    I am using Instant WordPress 4.3 (if that matters) so there is no live site yet, WordPress 3.6 and Customizr 3.08 (when I updated to 3.09 it wouldn’t load correctly; I will work on that later). I tried creating a child theme:

    customizr-child/style.css

    /*
Theme Name:     Customizr Child
Theme URI:      https://example.com/
Description:    Child theme for the Customizr theme
Author:         Chris
Author URI:     https://example.com/
Template:       customizr
Version:        0.1.0
*/

@import url("../customizr/style.css");

    And it will not even show; it only says ‘Template is missing.’ under Broken Themes at the bottom of my themes area. I even tried with twentyten, etc. and have the exact same problem (yes, I updated the style.css to point to the correct directory).

    How can I use the Custom CSS to insert a background image behind the Slider? Or which file can I modify to get this to work? Thank you!

Viewing 6 replies - 1 through 6 (of 6 total)

  • Try adding this after the body code:

    #main-wrapper {
  background-color: #5A5A5A ;
  margin-top: 0;
}

    Change the background-color to your site color.

    If not working, leave us a link.

    Thread Starter Chris

    (@curbano1972)

    I have no problems with the background color. It’s adding an image to the background that I cannot seem to find any working solutions for. Just on the regular Customizr theme, with no modifications at all….how do I add a background image? I would prefer it to be in the area under the header where the slider is located. Thank you for your help!

    Your #2 body element + #main-wrapper worked for me.

    Link to your site?

    Thread Starter Chris

    (@curbano1972)

    My site is not running yet. I am using “Instant WordPress” which allows me to run a local version of WP to design my site on my PC before I go live with it. I’m sorry I don’t have it up yet; for reasons like this!

    Is this what worked for you?:

    body {
  background: url('/wp-content/uploads/zMyBanner.png') repeat fixed 0 0 #FAFAFA !important ;
  color: #5A5A5A;
  padding-bottom: 0;
}

#main-wrapper {
  background-color: #5A5A5A ;
  margin-top: 0;
}

    Also, was this inserted into the Custom CSS box? If not, may I ask where you put the code? Thank you again for your help!! When I get out a few of these bugs, my site is: https://start-here-online.com/

    The body element put the image into the entire background but it needed the #main-wrapper to blank out the container area so the image surrounded it, not through the middle of it.

    Should work in the CustomCSS panel (3.0.9) as the single quote special character used to cause a problem previously. However, would recommend moving to a child theme and leaving the CustomCSS Panel free for research/testing CSS.

    Thread Starter Chris

    (@curbano1972)

    Thank you very much for your help, rdellconsulting!! It is finally working. I couldn’t get the child theme to work–as noted in my original post–but I will figure out why at a later date or begin a new thread if need be… I really appreciate everything you’ve done. Have a wonderful week! ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Add background image BEHIND slider on static front page’ is closed to new replies.