In many of our client dashboards, we use patterns created using CSS in SAP DesignStudio, for the background. Though we could just as well use images, using CSS patterns helps us come up with some really creative and interesting backgrounds. And as we know, CSS is light weight, responsive and also loads quicker than regular images. Using the right patterns can also make a huge difference on the overall user experience.
Steps for using CSS in SAP Design Studio
1) Insert a Textbox in the Application and set the Width and Height to auto and Margins to 0.
2) Now insert the CSS code in the CSS Style Editor, as shown below.
background:
linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background-color: #131313;
background-size: 20px 20px;
3) Another way is to use CSS Class. Insert an Image component in the application.
4) Create a CSS file with Class ‘patterns’.
5) Now set the CSS Class for the Image component to ‘patterns’. That’s all there is to it! The main part of the effort is in creating an effective background using CSS in SAP DesignStudio
source: http://visualbi.com/blogs/design-studio/css-in-sap-designstudio/