Adding Image to a column as a background

[mikedoughty]

Hi,

I’m wanting to add an image as a background to a column.

The page is

http://knowledgegym.staging.wpengine.com/home-template

and near the bottom we have an event section, which has a row set to 4 columns, and one of the columns I’m wanting to use an image as a background, where the others are just using a colour as the background.

How can I do this.

2017-07-05_1440

[thai]

Hi There,

Please add a CSS class to that column:

After that add the following CSS under Customizer > Custom > Global CSS:

.image-column {
background-image: url(http://knowledgegym.staging.wpengine.com/image.png);
}
.image-column1 {
background-image: url(http://knowledgegym.staging.wpengine.com/image1.png);
}

You can do for another column by adding another CSS class and duplicating the custom CSS.

Hope it helps

[redpanda]

Sorry for hijacking, the code given works, but any chance to make the image as cover and centered?

[friech]

Hi There,

Yes, you can add the background-size and background-position property.

.image-column {
	background-image: url(http://knowledgegym.staging.wpengine.com/image.png);
	background-size: cover;
	background-position: center;
}

.image-column1 {
	background-image: url(http://knowledgegym.staging.wpengine.com/image1.png);
	background-size: cover;
	background-position: center;
}

Or you can do it something like this,

.image-column,
.image-column1 {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

So if you decide to change something on the property or add another property to this classes in the future, you can do it at once and not for each block of class. Obviously the background-image property needs to be separated because you need a different image for each columns, right?

Hope it helps,
Cheers!

[edyhdz]

I was creating a post on this very topic. I did something similar to what the solution was, however on mobile the column background disappears. Anyone else having this issue?

thanks,
-e

[jade]

Hi @edyhdz,

Please provide the link to your site so that we can check it.

[edyhdz]

http://506.247.myftpupload.com/west-campus/

[nabeel]

Hi again,

Thank you for providing the URL. Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

@media (max-width: 767px) {
    .x-section .x-container.marginless-columns .x-column[class*="x-"] {
        overflow: auto !important;
    }
}

Let us know how this goes!

[edyhdz]

great idea for the fix! however, now the map on the page is hidden. I checked to see if there were any additional classes that would throw off your adjustment and there were none. Any idea on how to make the map column come back?

-e

[nabeel]

Hi again,

Try replacing the previous code with the following code:

@media (max-width: 767px) {
    .x-section .x-container.marginless-columns .x-column[class*="x-"] {
        float: left;
    }
}

Let us know how this goes!

[edyhdz]

It works!

Thanks!

-e

[jade]

You’re welcome.