[matthewseanmclachlan]

Hello,

What dimensions in pixels (L x H) do I need to create a file to fit the entire background of my homepage. This background image I would like to run continuously, from top to bottom, even behind the slider if possible.

While we’re on the topic. Is there a way to make this background have a scroll to it?

Website: http://www.trendfly.org/

Thanks in advance!
Matt

[Mahesh]

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

[matthewseanmclachlan]

Hi Mahesh,

I have put a draft of a background on my site. I was hoping the background would stretch to fill the screen when centered. Is this possible? That image is at 1600×1600.

I also did not find in my Custom CSS the code for the body (see code, below). Should I just copy and paste your CSS in the Custom, and I will be okay?

Website: http://www.trendfly.org/

Thanks in advance!
Matt

.site { padding-top: 75px; }
#header-top { position: fixed; }

/* Menu Font Size */
#header-menu ul.menu a { font-size: 20px; }

.home .post-44,
.home .post-44 .entry-content,
.home .post-44 .entry-content p {
margin: 0;
padding: 0;
}
.home .post-44 .entry-header {
display: none;
}
.entry-meta { display: none; }
#top-logo img {
margin-bottom: -80px;
max-height: 160px;
}
#access-top .menu {
bottom: 10px;
position: absolute;
right: 0;
}
#access-top ul.menu a {
font-size: 18px;
}

@media screen and (max-width: 940px) {
#top-logo img {
max-height: 150px;
}
}
#header-top {
background: #ea3b36;
background: rgba(234, 53, 54, 0.7);
box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
position: fixed;
z-index: 99;
}

[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

[matthewseanmclachlan]

Mahesh,

I added the code you suggested and the background is fixed. Thanks!

1) I would now like to know how to move the slider up snug up with the menu bar

2) How do I increase the space in between the posts?

3) How do I add a drop shadow to the posts?

Thanks in advance!
Matt

[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

[matthewseanmclachlan]

Hi Mahesh,

All of your code you offered worked great, but I would like to decrease the opacity of the drop shadows and the sizes that I added to my posts. What in the code you gave me changes these attributes?

Thanks!
Matt

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

[matthewseanmclachlan]

Hi Mahesh,

In addition, it only makes sense that I added this same code to the top slider as well. What is the CSS needed to create a drop shadow to the top slider?

Thanks!
Matt

[Mahesh]

Hi @matthewseanmclachlan,

To decrease opacity, you have to decrease the last value i.e. 1 in the above CSS code. Range (0 to 1). Replace above with the following.
The code adds up drop shadow to slider as well.

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

Note:
box-shadow: h-shadow v-shadow blur-distance spread rgba( red, green, blue, opacity );

Hope this clarifies you.

Regards,
Mahesh

[matthewseanmclachlan]

Hi Mahesh,

Thanks for the clarification! All of your suggestions worked.

Follow up question: How do I increase the space between the last post and the bottom of the web page? Currently, when the post ends the web page ends. I will like to elongate the page a little further.

Website: http://www.trendfly.org/

Thanks in advance!
Matt

[Mahesh]

Hi @matthewseanmclachlan,

Please use the following CSS:

#main article:last-of-type {
      margin-bottom: 50px
  }

Note: Please change the value as required.

Regards,
Mahesh

[matthewseanmclachlan]

Great, this works perfect! Thanks Mahesh!!

[Mahesh]

Hi @matthewseanmclachlan,

Oh that’s great.
Have a nice day!

Regards,
Mahesh

[Author]

Posts