Background Image and Background Scroll

Hi @matthewseanmclachlan,

There is no actual dimensions for the background image to use in the site. Small image is used and is repeated to cover the whole area and it looks like a single image covering the whole site’s background.

For that, please remove the Custom CSS having background-color rule and add the following styles:

body { 
    /* I have used used your logo for url for the idea */
    /* Please Replace The String inside url('') with your desired image url */
    background-image: url('http://www.trendfly.org/wp-content/uploads/2015/08/Web-Logo_Trendfly_4-shadow.png'); 
}
#branding { 
    background-color: transparent; 
}

I don’t quite get you on the second question i.e. “make background have a scroll”. Please clarify it.

Let me know if this helps you.

Regards,
Mahesh

Hi @matthewseanmclachlan,

I think you’ve edit in the theme files for custom background. This can be achieved with Custom CSS. Remove other codes you’ve add into the theme for background image.

In “Dashboard=> Appearance=> Theme Options=> Custom CSS”, remove the following codes:

#sidebar-header-top { background-color: #ffffff; }
#branding { background-color: #ffffff; }
#header-image { background-color: #ffffff; }
#main-slider { background-color: #ffffff; }
#main-slider .hentry { background-color: transparent; }
#main { background-color: #ffffff; }

And add the following :

body { 
    background-image: url('http://www.trendfly.org/wp-content/uploads/2015/12/Web_Blue-Print.jpg'); 
    background-repeat: no-repeat; 
    background-position: top center; 
    background-attachment: fixed;
}
#branding { 
    background-color: transparent; 
}

Leave the other as it is. Hope this helps with what you want. Please clarify on background stretching when centered point.

Regards,
Mahesh

Hi @matthewseanmclachlan,

1. To move the slider up snug up with the menu bar
Go to “Dashboard=> Appearance=> Theme Options=> Custom CSS” box and add the following CSS:

#page > header#branding {
    display: none;
}

2. To increase the space in between the posts, add following CSS:

#main article.post {
	margin-top: 40px;
}

#main article.post:first-child {
	margin-top: 20px;
}

3. To drop shadow to the posts, add the following CSS:

#main article.post {
	-webkit-box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 1);
	-moz-box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 1);
	box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 1);
}

Regards,
Mahesh