Child Theme

Child Themes inherit all the CSS from their parent theme so it’s normal to see the parent theme’s CSS still controlling the site.

Thank you Andrew. The problem is the child theme css is not over ruling the parent. Below is my child css. Here is link, theme is set to child. https://webeartist.net/movedstyle/ If I put the changes below back into parent, then I get changes I’ve made.

/*
Theme Name: Sugar and Spice Child Theme
Description:
Author: Susan
Template: sugar-and-spice

(optional values you can add: Theme URI, Author URI, Version)
*/

@import url(“../sugar-and-spice/style.css”);

/* =Theme customization starts here
————————————————————– */

/* 02. Page Layout
================================================== */
#page:after {
content: ”;
width: 1008px;
height: 30px;

background-repeat: no-repeat;
background-position: bottom left;
background-size: cover;
display: block;
}
#page:before {
content: ”;
width: 1008px;
height: 35px;

background-repeat: no-repeat;
background-position: top left;
background-size: cover;
display: block;
}
#header {

background-repeat: repeat-y;
background-position: top left;
background-size: contain;
position: relative;
}
#main {

background-repeat: repeat-y;
background-position: top left;
background-size: contain;
padding: 3em 34px;
overflow: hidden;
}

Which style specifically isn’t working?

In each of styles I pasted in post, background image is removed (example: background-image: url(“images/hfbg.png”);) removing border around main template. So in all of them, they are still showing the background border even though removed in child theme.

I checked one of them:

#header {

background-repeat: repeat-y;
background-position: top left;
background-size: contain;
position: relative;
}

And they were showing.

There is no style that removes the background image, what do you mean? Do you mean you copied the parent theme’s CSS into your Child Theme and then just deleted the line of CSS?
E.g. you copied this:

#header {
background-image: url(...);
background-repeat: repeat-y;
background-position: top left;
background-size: contain;
position: relative;
}

And then deleted the background image line in your Child Theme style.css file:

#header {

background-repeat: repeat-y;
background-position: top left;
background-size: contain;
position: relative;
}

??

Yes, I originally worked on parent theme as I had trouble creating child manually & getting WP to recognize. Then researched more & found the plugin to create it. Once that worked I just moved over part of code I had changed. Maybe I’m doing something wrong/backwards… just not had this much trouble with a child theme before.

The Child Theme style.css file will only override the parent theme if you specify so. That means unless you tell “#header” for example to have no background image then it will continue to have one as the parent CSS will be used.
So you need to tell “#header” not to use a background image:

#header {
 background: none;
}

Seems to work if I put in background-image: url(“”); and remove the url.

I am new to blogging and wondering how to make a child theme, have no web designing experience.