# Expected rbracket background-image: url(\[wpbb post:featured\_image size ='full' display='url'\]);

**URL:** <https://community.wpbeaverbuilder.com/t/expected-rbracket-background-image-url-wpbb-post-featured-image-size-full-display-url/12483>\
**Category:** Beaver Builder\
**Created:** [July 20, 2020, 8:02pm UTC](https://community.wpbeaverbuilder.com/t/expected-rbracket-background-image-url-wpbb-post-featured-image-size-full-display-url/12483 "2020-07-20T20:02:46Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![lineardynamics](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/l/94ad74/32.png) [@lineardynamics](https://community.wpbeaverbuilder.com/u/lineardynamics)\
**Post date:** [July 20, 2020, 8:02pm UTC](https://community.wpbeaverbuilder.com/t/expected-rbracket-background-image-url-wpbb-post-featured-image-size-full-display-url/12483/1 "2020-07-20T20:02:46Z")

</div>

Trying to make a custom post layout(BB Post module). It seems that the syntax is not accepted with this line:  
background-image: url([wpbb post:featured\_image size =‘full’ display=‘url’]);  
screenshot 1 is the error: [https://i.imgur.com/LN9llxa.png](https://i.imgur.com/LN9llxa.png)  
Screenshot two shows that the shortcode work OK if just in a div: [https://i.imgur.com/Gm5te7N.png](https://i.imgur.com/Gm5te7N.png)

col 37 is the colon within the shortcode. I thought perhaps I need to escape it with a \ or something.

Expected ()  
Then I considered that the url part of the line needed to be in double quotes. does not seem so either. frig this form won’t let me put more than one link per post. I’m sure that you can figure out this url:/FEMUrBr.png  
I tried escape quotes, colons, equals signs. None seemed to work.  
Thanks for any help. BB is up to date, etc.

---

<div class="post-metadata">

**Author:** ![lineardynamics](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/l/94ad74/32.png) [@lineardynamics](https://community.wpbeaverbuilder.com/u/lineardynamics)\
**Post date:** [July 20, 2020, 8:16pm UTC](https://community.wpbeaverbuilder.com/t/expected-rbracket-background-image-url-wpbb-post-featured-image-size-full-display-url/12483/2 "2020-07-20T20:16:22Z")

</div>

Turns out that you can put the background-image inline with the html. Probably this is OK for what I am aiming to achieve. Although I was hoping to have some custom fields with things like post feature color also in the css file.  
this works:

this is the cwhfeaturesblock2 [wpbb post:featured\_image size ='full' display='url']

---

<div class="post-metadata">

**Author:** ![pross](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/pross/32/883_2.png) [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Post date:** [July 20, 2020, 8:19pm UTC](https://community.wpbeaverbuilder.com/t/expected-rbracket-background-image-url-wpbb-post-featured-image-size-full-display-url/12483/3 "2020-07-20T20:19:45Z")

</div>

Shortcodes will work in css, if you enable it. The _error_ you are seeing there is the code tool … its not going to know your shortcode will output a url, just click save and ignore the error.

---

<div class="post-metadata">

**Author:** ![lineardynamics](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/l/94ad74/32.png) [@lineardynamics](https://community.wpbeaverbuilder.com/u/lineardynamics)\
**Post date:** [July 21, 2020, 1:02pm UTC](https://community.wpbeaverbuilder.com/t/expected-rbracket-background-image-url-wpbb-post-featured-image-size-full-display-url/12483/4 "2020-07-21T13:02:11Z")

</div>

“if you enable it.”  
I’ve looked for a setting ‘enable shortcodes in css’ or something similar. Didn’t find anything.

Have tried the following lines:  
background-image: url([wpbb post:featured\_image size =‘full’ display=‘url’]);  
background-image: url("[wpbb post:featured\_image size =‘full’ display=‘url’]");  
I did try to exchange double quotes for singles, singles for doubles, escapes .  
None seem to be correct.

The below code renders out like this: [https://i.imgur.com/ezn0vb9.png](https://i.imgur.com/ezn0vb9.png)

this is the cwhfeaturesblock66 [wpbb post:featured\_image size ='full' display='url']

.cwhfeaturesblock66  
{  
height: 250px;  
width: 250px;  
background-size: cover;  
background-position: center;  
background-image: url([wpbb post:featured\_image size =‘full’ display=‘url’]);  
background-repeat: no-repeat;  
}

---

<div class="post-metadata">

**Author:** ![pross](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/pross/32/883_2.png) [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Post date:** [July 21, 2020, 4:25pm UTC](https://community.wpbeaverbuilder.com/t/expected-rbracket-background-image-url-wpbb-post-featured-image-size-full-display-url/12483/5 "2020-07-21T16:25:13Z")

</div>

There isnt a setting, you have to manually enable it

> **[Use shortcodes in CSS or JS | Beaver Builder Knowledge Base](https://docs.wpbeaverbuilder.com/beaver-builder/advanced-builder-techniques/shortcodes/use-shortcodes-in-tools-menu-css-or-js/)**
>
> You can use shortcodes in Layout CSS & JavaScript settings, accessed from the Tools menu. Use this feature to replace a value in custom CSS or JS in a Beaver Builder layout.