Adding graphic to corner of column

[Web_Services]

Hi, I’m wondering if it’s possible to attach a graphic tucked behind the corner of a column like in the design below.

Graphic is: http://www.swingeducation.dreamhosters.com/wp-content/uploads/2018/05/yellow-brush@2x-e1525825559314.png

Is this doable with custom CSS? And will it be mobile responsive?

Note: this column is in a Global Block

Thanks!

[friech]

Hi There,

Thank you for writing in, try to make that image as the background of the ROW or the right COLUMN, and then set the background position to right top

If that does not work, please provide us the direct page URL where we can see that section, so we can take a closer look.

Cheers!

[Web_Services]

Adding the graphic to the row background as recommended above worked, but its position does not stay the same in the mobile version.

Adding it to the column background kept it contained within the column rather than on the outside like in the design above.

You can see an example at http://www.swingeducation.dreamhosters.com/

Thank you for all of your help! You guys have been great, and if there’s a place you’d like me to write a positive review, I’m happy to do so.

[friech]

Hi There,

Sorry, the background-position did not work, let’s try a different approach, please inspect the ROW and under the Customize tab, please add the following custom CSS on the Element CSS area.

@media (min-width: 768px) {
	$el:before {
	content: url(IMAGE URL HERE);
  	position: absolute;
    top: -50px;
    right: -100px;
	}
}

Next, inspect the 3rd Column (the column before the Learn More box), and then add the following custom CSS on its Element CSS area

@media (max-width: 767px) {
	$el:before {
		content: url(IMAGE URL HERE);
	  	position: absolute;
	    bottom: -50px;
	    right: -100px;
	}
}

Feel free to adjust the top, right, bottom value where you see it fits.

Cheers!