Docs

[JW & Co.]

Hello,

Can you please advise me how to change the topbar background image of only the pages under Services at http://www.homeandhealthy.joshuaweatherstone.com? I tried this code but I know I need to target those five pages with it:

.x-topbar {
background-image: url(http://homeandhealthy.joshuaweatherstone.com/wp-content/uploads/2016/07/We-Get-Right-To-Work-1.jpg);
}

Thanks,
Josh

[Joao]

Hi Josh,

Plese try

.x-topbar {
background-image: url('http://homeandhealthy.joshuaweatherstone.com/wp-content/uploads/2016/07/We-Get-Right-To-Work-1.jpg');
}

Hope it helps

Joao

[JW & Co.]

With some minor customizations to your code I was able to target the specific pages.

If you take a look at http://homeandhealthy.joshuaweatherstone.com/home-alterations/, you will notice that the background image for the topbar doesn’t look very good. I was really to achieve more of a seamless blend between the topbar and the background of the page below the menu. Would a z index be a better way to accomplish what I have in mind, or is there some other trick that will help the two blend together better?

Thanks,
Josh

[Rad]

Hi Josh,

Would you mind providing a mockup design of expected result? Background between elements aren’t synced by default, but you may able to change it through background positioning. Changing z-index will cover everything, hence, not a good solution.

Thanks!

[JW & Co.]

Hello Rad,

If you take a look at the home page, you will see a mockup of the style I am trying to achieve. The idea is simply for a single background image to start at the top of the page, have the navbar on top of it, and then continue down below; by using only one image rather than two I hope to avoid having the two not always match up.

Does that make more sense?
Josh

[Rad]

Hi Josh,

I understand that but it’s not what I’m trying to understand. What I need to know is the positioning to sync the topbar’s image to blend it with the page background. For example, what should it look like when the top bar and page’s background become connected? Since this is specific to a page, then it requires different positioning depending on the image you’ll add. There is no universal CSS for this customization since this is specific to page and image.

Thanks!

[Author]

Posts