[ielorieParticipant]

I would like to insert 3 columns on my full-width page. Each column would have a background image and text over top of the image (not below). Do you have a short code to do this?

[Nabeel AModerator]

Hi there,

You’ll need to do this via Visual Composer. Select a content band and choose 1/3 + 1/3 + 1/3 custom layout. Now for each layout add a background image and text element.

This should do it. Let us know how this goes!

[ielorieParticipant]

I’m sorry, I am missing it.

Within the column I don’t see where to add a background image or text. I see that I can add the background image for the whole row, but not for the column.

When I’m in the column, if I click on the little pencil I can see:
Fade Effect -Select to activate the fade effect.
Fade Animation -Select the type of fade animation you want to use.
Fade Animation Offset – Set how large you want the offset for your fade animation to be.
ID- (Optional) Enter a unique ID.
Class- (Optional) Enter a unique class name.
Style – (Optional) Enter inline CSS.

If I click on the plus sign within the column then the formatting options for VC show up (content band, container, line, etc. etc.)

Where is the option for a background image?

[ielorieParticipant]

Got it.

I had to put a container inside the column, where the container has the option for the background image.Thanks for pointing me in the right direction!

[Paul RModerator]

Hi,

Glad you figured it out.

Have a nice day!

[kingpupParticipant]

Sorry to resurrect an old thread but I found this through searching for the same problem the OP had and figured that if I get an answer it will help other people who stumble upon the same thread!

I too would like to add background images to columns. The OP says they found the answer through inserting a container into the column and specifying a background image in the container, however when I click on the options for a container I don’t see any option to add a background image – I just have: ID, Class, Style. That’s it!

Has something changed to the specifications of the container shortcode since this question was originally posted? Is there a new way to add a background image to a column now?

[Rue NelModerator]

Hello There,

Thanks for updating this thread!

No, nothing has changed. It’s just that you add your background image via style field or with the help of the id or class you can add the background image through custom css in the customizer.

Hope this helps. Kindly let us know.

[kingpupParticipant]

Ah got it, thanks. I was able to add a custom class to the page.

[LelyModerator]

Hello There,

Glad you’ve sorted it out.
Feel free to post when you have questions.
Thanks.

[flickdigitalParticipant]

No, nothing has changed. It’s just that you add your background image via style field or with the help of the id or class you can add the background image through custom css in the customizer.

Could you please post some example codes for this? I have been wanting to use images for backgrounds in some columns but haven’t worked out how. Thanks in advance!

[ZeshanMember]

Hi there @fredomdesign,

Thanks for writing in!

You can use following CSS code to add background image to a column:

background: url(URL_TO_YOUR_IMAGE) no-repeat center center; background-size: cover;

Replace URL_TO_YOUR_IMAGE with your image URL.

Thank you!

[flickdigitalParticipant]

Thank you, that works great.

Is there code I can use to make the entire column a clickable link?

[John EzraMember]

Hi there,

Thanks for updating the thread! A column is a block element. Block elements can’t be put inside links in HTML versions before HTML 5. And within HTML 5 you can’t have interactive elements within a link or tags (like buttons). It will really depend on what you want to achieve it is possible. You can style the link to work as a block so that covers the entire column. It will be best if we can see so we can advise accurately.

Please provide us your URL and any access that we may need to see the page with the column and link in question. Thanks!

[flickdigitalParticipant]

I have columns with featured images set with the following column style:
max-height: 350px; min-height: 280px; background: url(http://bikeabouttours.co.nz/bat/wp-content/uploads/2016/03/winery-rides600x.jpg) no-repeat center center; background-size: cover;

Inside these columns is a gap element and text. I have added style to the text using css.

It’s simple to make the text a link, but It would look a lot more professional if a link appeared when hovering over any part of the column.

Very bottom of http://bikeabouttours.co.nz/bat/ “Popular Tours”.

Thanks!

[Paul RModerator]

Hi,

You can add your text to your image using an image editor like photoshop.

Then use an image element so you can link the entire image.

http://screencast.com/t/kDltRfbU

Hope that makes sense

[Author]

Posts