How to use an image as background for columns on my page?

this rule will set the middle column background image

#builder-section-1424227466340-column-2 {
    background-image: url(path to your image);
}

Thanks so much!

Sorry for the stupid question, but where do I place this code exactly? On the CSS code for the page itself?

Thanks.

Hi there,

You’ll want to place it in the CSS of your child theme. Or use a plugin like Simple Custom CSS.

Hope that helps!

ps – Thanks for pitching in, mrtom414!

Hi Melissa,

Thanks! I just downloaded the Child theme and have installed it.

I am confused about where in the Editor I should place this code. I only want to change the background of one set of columns on the front page…. so wouldn’t there be a very specific spot where i place this code?

Hi I just downloaded the child theme and it completely messed up my front page ?? I’m not sure what just happened….

Hey there,

Sorry about that. WordPress considers child themes separate entities… So if you’ve made customizations to your site through the Customizer, switching to the child theme would result in those being lost, sorry to say.

BUT if you can recreate those, it’s a much better idea to have that installed, because customizations you’ve made to your theme files won’t be lost when you run theme updates.

If you’re using the child theme still, you’d want to add your custom CSS to the style.css file of your theme files. We have some tutorials on our site that will probably help you out!

Good luck!

No problem!

I’ve switched back to using the normal main theme. Seems less complicated that way!

I tried using the code mrtom414 gave to me:

#builder-section-1424227466340-column-2 {
background-image: url(path to your image);
}

BUT!! its targeting the second section of columns…..whereas I want to target the columns above…. Is there a different code for this?

THANK YOU SO MUCH!

Hello! Your best bet to make the changes you want is to learn how to use a Web Inspector or Firebug or the like. We have a few tutorial on our site that will empower you to find and changes these things on your site:

* Editing your CSS and theme files
* Making Style Changes with Firebug or Web Inspector

I use Chrome, so I highlight the place on the page and then right click and Inspect Element to find the right ID to target element.

You’ll be looking for this one: #builder-section-1424229244811-column-2

Good luck!