Store Background

We no longer maintain the Knowledge Base since version 4.3.x. All the latest user and developer documentation for 4.3.x and newer versions is now available at docs.cs-cart.com.

  • This article applies to CS-Cart versions:
  • 3.0.x

All modifications are performed via the My Changes add-on

  • Solid color.

    In order to fill the background with a solid color you should define the color in RGB-format. Use any color picker to get the RGB-code of the desired color.

    The default color scheme was designed assuming the background was white or similar color. Be careful picking the background color for it may affect the readability of some elements

    When you know the color code define it in the selector:

    body {
    	background-color: #XXXXXX;

  • Image as Background.

    Prepare an image in one of the supported formats: GIF, JPG or PNG. Mind that using large images may lead to longer main page loading.

    In order to set an image as background use the selector:

    body {
    	background-image: url('images/your_file.png');

    The image will be placed in the upper left corner of the page and will automatically tile the whole page both vertically and horizontally.

    Change the tiling mode be modifying the property background-repeat:

    • background-repeat: repeat-x; — tile horizontally
    • background-repeat: repeat-y; — tile vertically
    • background-repeat: no-repeat; — no tiling

    Initial image placement can be defined with the help of the property background-position. It is possible to use either coordinates (including negative values) in any allowed CSS-units or keywords left, right, top, bottom and center. The keywords can be combined:

    • left top, center top, right top
    • left center, center center, right center
    • left bottom, center bottom, right bottom
  • In both cases try to avoid "dangerous" color combinations (e.g. white letter on white background).

    Header, Central Part and Footer

    All the background manipulations described above are applied to the selector body. It is though possible to change background for page header, central part and footer individually — just follow the same instructions with the respecting selectors:

    • header — #ci_top_wrapper
    • central part — #ci_central_wrapper
    • footer — #ci_bottom_wrapper
Home / Docs / Appendix / Examples of Design Changes / Store Background