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?

/* 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, 8 months ago by imthewayne.

Awesome I will continue working on it.

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;   
}

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

That doesn’t display the image.

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

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.

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;
}

I did some digging from that other thread and found the background image code

<div id="popup-box-gfcr-1" class="popupally-overlay-gfcr-1 popup-click-close-trigger-1">
<div class="popupally-outer-gfcr-1">
<div class="popupally-inner-gfcr-1">
<div class="popupally-center-gfcr">
<div class="desc-gfcr">Sign Up for here for our twice-monthly Command Log so you can always get the latest updates from our crew. Never miss a new transmission from Mars again!</div><div class="logo-row-gfcr">
<div class="clear-gfcr">
</div>
<img class="logo-img-gfcr" src="https://marsfallpodcast.com/wp-content/uploads/2017/11/mars-2051748.png" alt="">
<div class="logo-text-gfcr">
</div>
<div class="clear-gfcr">
</div>
</div>
<form action="https://marsfallpodcast.us16.list-manage.com/subscribe/post?u=df8d18507848ce16e83409ce0&id=b7d0572622" popupally-popup="1" class="popupally-signup-form-ishdye content-gfcr" method="post"><input type="hidden" name="LNAME" value=""/>
<input type="hidden" name="BIRTHDAY[month]" value=""/>
<input type="hidden" name="BIRTHDAY[day]" value=""/>
<input type="hidden" name="b_df8d18507848ce16e83409ce0_b7d0572622" value=""/>
<input type="text" name="FNAME" class="field-gfcr" placeholder="Enter your first name here"/>
<input type="email"  name="EMAIL" class="field-gfcr" placeholder="Enter a valid email here"/>
<input type="submit" class="popupally-form-submit submit-gfcr" value="Subscribe!" /></form>
<div class="privacy-gfcr">Your information will *never* be shared or sold to a 3rd party.
</div>
</div>
</div>
<div title="Close" class="popupally-close-gfcr popup-click-close-trigger-1">
</div>
</div>
</div>			
<style type="text/css">
				.ssp-wave wave wave{
					background: #00d4f7 !important;
				}
			</style>
			<div style="display:none">
	</div>

This specific line contains the image. How does it work though and how do I do it?

<img class="logo-img-gfcr" src="https://marsfallpodcast.com/wp-content/uploads/2017/11/mars-2051748.png" alt="">

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