Add background image to callout

I am trying to add different background images to 3 callout sections on a site here: http://naturesplan.wirebirdmedia.com/

I think I understand how to target the specific nodes but I can’t figure out why my code isn’t working. The background of the row is set to none so I’m fairly certain there isn’t anything blocking it…

`.fl-builder-content .fl-node-551dd2b556a0c .fl-node-content {
background-image: url(“landscape-architecture.png”);
}

Help?

Please excuse me if I’ve already posted this question here, I can’t find my original post if I did!

Hi Sara,

You nearly got it. Try this:

.fl-builder-content .fl-row .fl-node-551dd2b556a0c .fl-module-callout {
background-image:url(http://naturesplan.wirebirdmedia.com/wp-content/uploads/2015/03/landscape-architecture-central-oregon.png);
}

It might not be your exact image, but you should be able to get it to display your background. All you’ll have to do then, is change the image name and location to the one you want.

Let us know if it works for you.

Colin

Colin,

I just had a chance to play with this for a while and I think I might have given you the wrong node-code. :slight_smile:

I tried to enter several different nodes that come up when I try to isolate the background of the module for Full Service Landscape Architecture in the dark blue background (that’s where I’d like the image) but I still cant’ get it to work.

Would you mind please taking another look? I think the node I’m aiming for is actually 55244fcbefae5…

Thanks!

Hi Sara,

I identify that one as 551c3338e41f5. The code below worked for me when on your page and inserting into Chrome Inspector tool:

.fl-builder-content .fl-row .fl-node-551c3338e41f5 .fl-module-callout {
background-image:url(http://naturesplan.wirebirdmedia.com/wp-content/uploads/2015/03/landscape-architecture-central-oregon.png);
}

Let us know if that works.

Colin

Colin,

Unfortunately that didn’t work. Even when I put !important at the end or “” around the image url.

I’m getting ready to just go with another idea but this was more or less what I bought this plugin to do so I’d really hoped to get it going… Any ideas?

It just seems overly complicated to isolate CSS in Beaver Builder, nothing seems to work for me, even custom classes.

Thanks!

Hi Sara,

As the Callout module does not have a background image property that can be set in the module settings, the only way to add one is to do so with custom CSS. However, the method of trying to isolate a specific BB node is not the best practice as using the Custom ID works like a charm as shown in the screenshots below.

In the desired Callout module, set a custom ID, such as callout1. Note that this is all you add there; no period (that’s for classes) and no # sign. Give each Callout a unique value, such as callout1, callout2, callout3.

I notice via your view page source that you are using Dynamik Website Builder so then go to Dynamik > Custom > CSS and enter your custom CSS there and Save. The example below is for the three Callout modules in the screenshot:

#callout1 {
		background: url(http://localhost/wordpress/wp-content/uploads/2015/04/repair2.jpg) no-repeat;
}
#callout1 h3 {
	color: white;
	font-weight: 600;
}
						

#callout2 {
		background: url(http://localhost/wordpress/wp-content/uploads/2015/04/crack.jpg) no-repeat;
}
#callout2 h3 {
	color: blue;
	font-weight: 600;
}
						
						
#callout3 {
		background: url(http://localhost/wordpress/wp-content/uploads/2015/04/Corroded-bolt.jpg) no-repeat;
}
#callout3 h3 {
	color: red;
	font-weight: 600;
}

Note that I have added some CSS for the Heading color and weight as well as changed the font color in the Callout module text area itself.

Another note is that if your “custom classes” don’t seen to work, it could be because of a caching plugin if you are using one. Disable or flush the cache and check again.

All this aside, from a design aesthetic, I would personally avoid adding a background image to each callout :slight_smile:

Cheers!
Lyle

Add ID

Three callouts

Lyle - Lol. I think I just wanted to prove that I could do it but seeing your mockups, maybe I’ll rethink that design (obviously I have a couple of ideas going on here). Thanks for doing the work for me!

Sometimes just because you can doesn’t mean you should! :wink: