Image size could be changed by selecting it from a Size selector. Top selector allows selecting image size numbers divisible by ten. Selecting single from a bottom selector other than 0 adds it to the number at the top selector. To get 24, select 20 from the top and 4 from the bottom. Alternative image side size could be typed directly in Alternative Image Side text box (for line gradient it would always be 1px).
Depending on a Gradient Direction type, the Size could correspond to image height or width:
- Vertical gradient - Size corresponds to image height and Alternative Image Side to the width.
- Horizontal gradient - Size corresponds to image width and Alternative Image Side to the height.
Note: Alternative Image Side may not exceed the Size.
The actual image size (width x height (px.)) is always displayed as Effective Tile Size at the bar above preview area.
If sync check box is ON, then the Alternative Image Side would inherit the value selected in Size automatically (may not be the case if Stripes are enabled - See Adding Stripes chapter).
Uncheck this box if you're trying to get the precise image size and actively working with Alternative Image Side and Size.
Except for a Line Gradient type, the Effective Tile Size corresponds to Size and Alternative Image Side controls values (again, may not be the case if Stripes are enabled).
The Line gradient creates background Images with minimum possible height/width - 1px (depends on gradient direction) to save the bandwidth at your site. The full blown line gradient rendered with HTML styling:
repeat-x for Vertical Line Gradients (Image width is always 1px)
repeat-y for Horizontal Line Gradients (Image height is always 1px)
Note: CSS Styling is outside of the scope of this manual. There are plenty of internet resources where you may learn how to use CSS to render background images.
If for any reason you need to have a Line Gradient with height/width over 1px (that is need to control Alternative Image Side), then you may use Angle Gradient type for that:
- Vertical Gradient - select Angle gradient type and set angle to 90 next to gradient direction selector.
- Horizontal Gradient - select Angle gradient type and set angle to 0 next to gradient direction selector.
Now, you may freely use Alternative Image Side to create a Line gradient with fixed height/width.