Flexi CSS Layouts is a Dreamweaver Extension that helps you create browser compliant table-less web pages with ease. Unlike other products that are limited to templated CSS layouts with 1, 2 or 3 columns, with Flexi CSS Layouts for Dreamweaver you can build your own custom layout structure without coding.
Not only that you can create fixed, liquid or elastic layouts in seconds, but you can generate custom website sections with unlimited DIV levels, following even the most detailed mock-ups from your designer.
Flexi CSS Layouts documentation
Setting a background color or image in Flexi CSS Layouts
Using the Flexi CSS Layouts interface you can add background colors or images on DIVs (cells) or on the page body without coding. If you are using images for background then you can set the repeat property so they cover the entire available space.
Understanding the background color interface
If you want to choose a background color for your layout you can use the typical color picker:
Adding a background color
- color picker: if you need to copy the color from a different cell, use the color picker
- color preview; shows the color you choose from the color palette or you inserted in the type in field
- type in color code: if you know the color code you can type it directly
- no background color: if you decided you don't need a colored background
Understanding the background image interface
The background image interface helps you define the path and the settings for the background image. If the image is already uploaded on a public server, you can paste the URL to it; otherwise you have to browse your local machine; if the image is not placed inside the site folder, Dreamweaver will ask you to copy it inside the local site.
Adding a background image
- url, browse and delete: browse&upload for the background image, paste the URL to an image uploaded on a public server or delete the path to the image
- repeat: repeat x or y will repeat the background image on the x or y axis to cover the entire available space in the DIV; repeat will repeat the image on both x and y axis to cover the entire DIV space; no-repeat will use the background image only once
- position x: the background image will be positioned on the x axis to the predefined positions or to a custom position in pixels
- position y: the background image will be positioned on the y axis to the predefined positions or to a custom position in pixels
How to add a background color or image on a DIV (cell)
To setup a background for a DIV (cell) in the layout structure, you need to select it in the working area:
Then in the right side panel click either on the background color button or choose a background image:
Adding a background color or image
How to add background on the entire page body
Whenever you start a new layout from scratch or you just need to change the main settings of a layout you need to use the Layout Properties interface. If you start a new empty page or section layout, the Layout Properties interface will pop-up when opening the interface. If you are already working on a layout but need to get back to the main layout settings, you can click on the "Layout Properties" button on the upper menu of the Editor. Read more about The Layout Properties Window here.