Docs

[WFULLSTREET]

I’m trying to achieve a PNG or JPG in the background of my website I’m building in X Theme, this is the visual I’m trying to replicate the background of the Canyon/Road website/section “https://www.canyon.com/en-gb/road/”

Canyon have a background which starts from the top of the website and extend’s past the possibilities that Revolution Slider can and overlays over the Cornerstone section.

Is there anyway you’d be able to assist in achieving this,

Additional to this I’m trying to make my menu bar transparent so I’m able to see the image in the background ever so slightly.

(http://elev8collective.com/)
Thanks in advance

Will.

[Paul R]

Hi Will,

Your site is currently under maintenance mode.

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[WFULLSTREET]

This reply has been marked as private.

[Friech]

Hi There,

You need to apply a negative top margin on your first section, so it will move up and overlay with the slider. And then apply a semi-transparent background color to the first section so we can see through it the slider image.

Regarding the header problem, please update your css code to this:

.x-navbar-fixed-top-active header.masthead.masthead-inline {
height: 0;
}
.x-navbar-fixed-top-active .x-navbar,
.x-navbar .sub-menu {
background-color: rgba(255, 255, 255, 0.5) !important;
}

Thanks,

[WFULLSTREET]

Thank you so much for your help regarding the header and subheader, worked perfectly I just changed the colours.

Regarding the background I’m slightly confused what you mean, I currently don’t have a top margin on the section, its right up to the rev slider.

I’m trying to make my background image alot larger so It will overlay the first section instead of what its like currently, really short due to it being on slider revolution.

Is there another way to get a XL image in the background which I’ll be able to change the image on each page after I edit through photoshop to gain the effect I’m looking for.

Thanks again for your help / I’ve added an image of the concept I’m trying to achieve (https://www.canyon.com/en-gb/road/)

Please sign in to my WP and see also.

Regards

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

.home .x-main.full {
    margin-top: -234px;
}

Hope it helps.

[WFULLSTREET]

Thanks for the reply, that helped massively.

I wanted to extend the rev’s slider image further down the page as for example 150px, is this possibly in any way?

Thanks again for the great support!

regards

Will

[WFULLSTREET]

I just did some research on an existing post from the Themeco Forum and this was the CSS I got if this makes you understand what I’m trying to achieve, I tried this but it simply locks into the area of the slider and doesn’t give you the freedom to set your own px.

.rev_slider .tp-bgimg.defaultimg {
background-position: center center !important;
min-height: 2000px;

regards

[Christopher]

Hi there,

Why don’t you add image as body background? You can add it under cornerstone settings tab/x settings.
You can also add image as section’s background.

Thanks.

[WFULLSTREET]

Thanks, I will give it a try!

This is the CSS I’ve got currently got;

.home .x-main.full {
margin-top: -234px;
}

This works perfectly on my homepage using the code you’ve given me, however how do I make it adapt to other pages? All the other pages in fact.

Thanks.

[Christian]

Please add a body class in your Page settings and use .your-body-class instead of .home

Thanks.

[WFULLSTREET]

This is the CSS I’ve got, I’m trying to change the background of each of my pages to a different image.

.site {
background-image:

url(“http://elev8collective.com/wp-content/uploads/2017/02/SwimmingImage-1-Fade-TESTLONG-1.jpg”);
background-repeat: no-repeat;

This add’s my long image to every page background on the site, I’m trying to do two things;

1/ Change this code so each page has a different image.
2/ Make it scalable and responsive with the website.

Regards

[Rad]

Hi there,

You can add something like this,

For page :

body.page-id-252 .site {
background-image:
url("http://elev8collective.com/wp-content/uploads/2017/02/SwimmingImage-1-Fade-TESTLONG-1.jpg");
background-repeat: no-repeat;
background-size: cover;
}

For post :

body.postid-181 .site {
background-image:
url("http://elev8collective.com/wp-content/uploads/2017/02/SwimmingImage-1-Fade-TESTLONG-1.jpg");
background-repeat: no-repeat;
background-size: cover;
}

Where 252 and 181 are the ID of your page/post. You can find your page/post ID by editing them in admin and the ID will be displayed on browser’s address bar (eg. post=181 )

Thanks!

[Author]

Posts