-2

I want to insert a background image in the IBM API Connect theme. I first googled, and I found how to insert an image in a node; then I downloaded the Background Images, the Background Images Formatter, and the ImageCache Actions modules, but to no avail.

I found out the CSS for it.

   body #main-wrapper { 
   background-color: #FFFFFF !important;  
   background-image: url('sites/all/BackgroundWallpapers/pink1.jpg') 
   !important;
   background-repeat: no-repeat !important;
   background-attachment: scroll !important;
   background-position: left top !important;
   background-size: cover !important;
   -webkit-background-size: cover !important;
   -moz-background-size: cover !important;
   -o-background-size: cover !important;
    }

I don't know how to insert a URL/path for the background image in the background-image attribute. Where do I store the image?

2 Answers 2

2

You can store image in your drupal theme.

for example, you are using custom theme then you can store image in project_name/sites/all/themes/custom_theme/images/image_name.jpg

And reference this path in your css file of your theme as below

background-image: url(../images/image_name.jpg);

1
  • Comments are not for extended discussion; this conversation has been moved to chat.
    – Clive
    Aug 13, 2018 at 9:39
0

As for the Background Image Formatter, what you want to do is:

  • Determine which element should get the background image you want to print

  • Provide said element with a custom CSS class

  • In the CSS selector field of the Background Image Formatter settings, input your custom CSS class, then setup the other parameters

It can be ANY valid CSS selector, and you can use token replacement, providing you with things like the current NID allowing it to be used in a view with custom text where you dynamically create your class in the text and call it from the formatter.

You can also provide it with pseudo selector allowing you to put the background image on a ::after or a :hover for additional control

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.