2018 Proper Way To Create A Child Theme

That looks correct. There’s a slight issue where your Child Theme style.css file is loading twice, but that won’t be responsible for the issue you described:

none of the style changes are used in the theme.

What specifically doesn’t work? If you want to explore whether your Child Theme styles are being ignored, try adding something really obvious to see if that shows up:

body {
	border: 10px solid red;
}

Color changes seem to work. SO it is reading the style.css. It is however not displaying my images, which I copied the code from a working site. Least I was on the right track.

body .site-content-bg {
	content: '';
	width: 110vw;
	height: 140vh;
	display: block;
	background: url('/wp-content/themes/supinv/images/sibg.jpg') center center;
	background-size: cover;
	position: fixed;
	top: 0;
	z-index: 0;
}

/* HOME */
body.home .site-content-bg {
	background: url('/wp-content/themes/supinv/images/sibg.jpg') center right;
	background-size: cover;
}

which I copied the code from a working site.

Was that website using the Twenty Seventeen theme? CSS is strongly coupled with the HTML used on the page and HTML changes for each theme. For example, the Twenty Seventeen theme does not have a HTML element with the class of “site-content-bg”, which you are referring to in your CSS.

Following this:
https://www.ads-software.com/support/topic/create-background-images-on-home-page-and-other-pages/

Which you assisted with actually. Doesn’t seem to work for me though.

Does it have to be a .png?

Nevermind:

/* Homepage - add background image */
body.home.colors-dark, 
.home.colors-dark .site-content-contain, 
.home.colors-dark .navigation-top, 
.home.colors-dark .main-navigation ul {
    background-color: transparent;
    background-image: url('path-to-image.png');
    background-repeat: no-repeat;
}

/* Homepage - add translucent background to content */ 
.home .site-content {
    background: rgba(0, 0, 0, 0.4);
}

It is now working.

• This reply was modified 6 years, 8 months ago by imthewayne.
• This reply was modified 6 years, 8 months ago by imthewayne.

Does this do what you want? I’m guessing at the moment. We can figure out a solution, but I just need to know in words what you want.

.colors-dark .site-content-contain {
	background: url('/wp-content/themes/supinv/images/sibg.jpg') center center;
	background-size: cover;
}

/* Homepage - add translucent background to content */ 
.colors-dark .site-content .wrap {
    background: rgba(0, 0, 0, 0.4);
}

That doesn’t display the image.

• This reply was modified 6 years, 8 months ago by imthewayne.

I am also confusing myself but many seem to want a new thread for each issue.

My bad, try this instead:

.colors-dark .site-content {
	background: url('/wp-content/themes/supinv/images/sibg.jpg') center center;
	background-size: cover;
}

/* Homepage - add translucent background to content */ 
.colors-dark .site-content .wrap {
    background: rgba(0, 0, 0, 0.4);
}

That is getting there but the footer now got huge and wont attach to the bottom.

Tried

.site-footer{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;   
}

You don’t want to use fixed position on your footer or things in general. Fixed position will screw up your layout. The footer won’t attach to the bottom if you have no content on your page, but that’s rarely the case because you wouldn’t create a page to have no content.

Awesome I will continue working on it.

Using this how do I automatically scale the background image to screen width?

/* Homepage - add background image */
body.home.colors-dark, 
.home.colors-dark .site-content-contain, 
.home.colors-dark .navigation-top, 
.home.colors-dark .main-navigation ul {
        background-color: #000000 !important;
	background-image: url('/wp-content/themes/supinv/images/sibg.jpg'); 
    background-repeat: no-repeat;
background-size: 100%, auto !important;

}

/* Homepage - add translucent background to content */ 
.home .site-content {
    background: rgba(0, 0, 0, 0);
}

• This reply was modified 6 years, 7 months ago by imthewayne.

Also the images on the other pages seem to repeat two times in the top menu. I would like the menu to be transparent.

Using this how do I automatically scale the background image to screen width?

Where is this not happening?

Also the images on the other pages seem to repeat two times in the top menu.

Which pages?

I would like the menu to be transparent.

Try:

.colors-dark .navigation-top, 
.colors-dark .main-navigation ul {
    background-color: transparent;
    border: 0;
}