Cidi Labs Support Center
How can we help you today?
Background Images and CSS
1 Comment
Kenneth Larsen
said
4 months ago
You can use inline CSS to set a background image for an element in Canvas. In the past, Canvas has stripped out most of the inline styles related to background images. I just tested and it looks like the main one it still strips out is background-size which would you would use to have an image to fill the background regardless of the height or width of the element.
The code would look something like this:
<div style="background-image: url('https://files.ciditools.com/generic/library.jpg'); background-position: center; background-repeat: no-repeat;">
<p>Content</p>
</div>A few things to keep in mind when using an image as a background:
- Accessibility: You will need to make sure that the text is readable with the image behind it. Dark sections can make it so parts of your text disappear.
- Screen Size: You will want to test your final product across a wide variety of screen sizes to make sure that it will display well for all users.
These are some of the reasons that we have not done much to help add images as backgrounds as part of DesignPLUS.
Michael Wilder
I have a special instance where we want an image of a spotlight with white space to write text on top of the image. An div tag for background image should do the trick, but I need to know what the code is and where it should be applied. Could it be applied to a single content block, so I can have text without background on the same page? This is in Canvas.
What are your recommendations?
Thank you