How do I upload and reference an image for use as a background for a CSS element?

Category: 

  • Question

I'm trying to use the CSS Injector module to customize the MIT Adaptive theme, specifically to set a custom image as the background for the #header-wrapper div. However, I can't figure out how or where to upload images, except as part of the content for an article. I don't know the path where they're stored, either, so even once I learn how to upload, I will need to know what URL to put in the background-image CSS rule. Can anyone help me?

10/15/13

When you click the "create a new rule" link in CSS Injector, you will be shown fields for your rule's title and CSS code. Below that, you will see options to upload fonts and images. Images are placed into your /sites/default/files/css_injector_images_image/ folder. You can also access the contents of this folder by clicking the File Browser tab in CSS Injector. You can use this to upload files directly, if you want, and then create rules referencing them.

Your code to use an image as a background will look something like this:

background: url(/sites/default/files/css_injector_images_image/your-image.jpg) no-repeat left;

10/15/13

Thank you -- I hadn't noticed those options before!

10/16/13