Images

brixioapp edited this page Mar 19, 2015 · 5 revisions
Images
To add an image to the screen:
  • select image placeholder from left sidebar, then drag and drop it just about anywhere

To upload new image file (jpg, png, gif) from your local storage:

  • double click on image placeholder in editor work area (if you have any), upload window opens

or

  • click on Upload in image properties window

or

  • open Files in left sidebar and click upload file area or select files button

then

  • select image file to upload and click Open (Chrome, Firefox) or Choose (Safari)

Images are placed in assets/img directory (if exists), or current directory (selected in file manager).


To change existing image:
  • select image in brix.io editor work area
  • image properties window opens

    • click on image thumbnail to set <img src>

    or

    • type in path and filename of image file in src field

    or

    • click on button with dot circle icon, next to the src field: file manager opens
    • double click on image file in file manager

Image properties to change in properties window: src, responsive, shape, alt, media.

Image properties window


To set or change background image:
  • select element to modify
  • in left sidebar, brick properties, click Styles to expand

then

  • type in location of image file in background-image field using css syntax
 url('URL')|none|initial|inherit;

location 'URL' should be relative to the css file, or full web location

or

  • click on button with dot circle icon, next to the background-image field: file manager opens
  • double click on image file in file manager

Important note:

Example:

body {
    background-image: url('assets/img/background.jpg');
}
  • CSS code with background-image for <body>element, like in sample above, is added to your default css file only if you have an element selector already defined in your css file. (body {} in this case. The same applies for #id or .class).
  • Otherwise style-auto.css is added to main directory with proper selector and properties.