Images
#####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
- click on image thumbnail to set
Image properties to change in properties window: src, responsive, shape, alt, media.
######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#idor.class). - Otherwise style-auto.css is added to main directory with proper selector and properties.