Docs

[crucialtim]

Hi,
I’m trying to create a background image that fades out from top to bottom, but the problem I’m running into is that body backgrounds in X stretch to fit pages. Is there a way around this?

What I tried doing to fake it was to have a background for the top section on my page, and then another for the next section down….but it doesn’t work (see attached).

Is there any way I can reliably make this happen, and simply have my background show up at the size I want it to, not be fixed positioned or scaled to the browser size, etc., or whatever X is doing by default?

I have also attached the background I WANT to use.

[Nico]

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[crucialtim]

Hi,
Here you go:
http://fts.crucialstaging.com/

I’m also trying to shorten the space in between items in the feature list here and not sure how to do it: http://fts.crucialstaging.com/what-we-do/

Thank you!

[Rad]

Hi there,

You should apply your background as a pattern and not as an image. The background image always defaults to cover (may stretch), while the pattern will just repeat it.

About the space, please add this CSS to your customizer’s custom CSS.

.x-feature-list .x-feature-box.top-text>div {
    padding: 0;
}

Thanks!

[crucialtim]

Thanks – tried that code for the feature list (found on another post here), and it didn’t change anything.

Setting the background as pattern worked on desktops, with quite a bit of tweaking (to the images), but the repeating of the background on a phone does not look good. Is it possible to set the BODY background as one big image that doesn’t repeat, doesn’t scale, doesn’t stretch? It’s pretty basic CSS…is it not possible to just implement this in X?

[Paul R]

Hi,

You can try this code instead

h4.x-feature-box-title {
    margin-top: 0;
}

.x-feature-box-graphic i {
    height: 0.5em;
}

.x-feature-box-text {
    margin: 6px 0 0;
}

With regards to your background, yes it’s possible you can add this in custom > css

body {
     background: url(background.jpg) top center no-repeat;
}

Change background.jpg with the url of your background image

Hope that helps.

[crucialtim]

Hi,
Neither worked, unfortunately. No change to the featured list spacing.

With the background image, it’s a bit better, but it looks like it’s still being resized to fit the screen (like background-attachment: fixed). I just want it to show up, positioned center top, and display at it’s actual size.

[Christopher]

Hi there,

Please uncomment this CSS code :

/* *********FEATURE LIST - SPACE BETWEEN ITEMS********* */
/*h4.x-feature-box-title {
    margin-top: 0;
}

.x-feature-box-graphic i {
    height: 0.5em;
}

.x-feature-box-text {
    margin: 6px 0 0;
}*/

And add the code we provided in https://community.theme.co/forums/topic/background-image-property/#post-1091297

In regards with background, try this code :

body {
     background: url(background.jpg) top center no-repeat;
background-size:contain;
}

Hope it helps.

[crucialtim]

Hi,
Feature list thing worked – thank you.

Background image = no change.

[Christopher]

Hi there,

Please remove background image from page setting’s box and clear cache.

Try following code one by one and check which one works better on your site :

body {
     background: url(background.jpg) top center no-repeat;
background-size:contain;
}

body {
     background: url(background.jpg) top center no-repeat;
background-size:cover;
}

Hope it helps.

[crucialtim]

Hi,
I think what you’re asking me to do is to make sure that the background image is deleted from Customizer / layout and design. I did that…

This is what I’m looking for: http://fts.crucialstaging.com – this looks and works exactly as I want it to (on a desktop)

…but do you know why this is happening to the image on inside pages? http://fts.crucialstaging.com/who-we-are/mission/ (note that the background image is smaller on inside pages and there’s white space that shows up on either side of the screen. I want it to look just as it currently looks on the home page.

And now on mobile, the background image is scaling to fit the screen (which I don’t want it to do).

[Christopher]

Hi there,

Please update previous code to :

@media (min-width:767px){
body {
    background: url("http://fts.crucialstaging.com/wp-content/uploads/2016/07/bkg-body-full.jpg") top center repeat-x;
    background-size: contain;
}
}

@media (max-width:767px){
body {
    background: url("http://fts.crucialstaging.com/wp-content/uploads/2016/07/bkg-body-full.jpg") top center repeat-x;
    background-size: cover;
}
}

Hope it helps.

[crucialtim]

Now we’re talking…thanks SO much for the help.

[Joao]

You are very welcome.

Let us know if you need further help.

Joao

[Author]

Posts