Application Launcher

Site Studio

Background image and gradient properties

Site Studio

Background image and gradient properties

Set the Background image and Background gradient of an element.

You can have multiple Background images and gradients applied to the same element. These are layered on top of each other to create a composite.

Type

Select whether to use an image or gradient.

Options and behavior:

Image (default) - Set the background as an image
Gradient - Set the background as a gradient
None - Set the background to none

Image

Shown if image is selected in Type field.

Set a background image (or multiple background images) on the element.

Application and options:

Click on the thumbnail to select an image
For multiple images or gradients or a mix of both, click Add image or gradient to add another image
Multiple images can be dragged up and down to change their stacking order

Find more information about background image at https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

Drupal image style

Set the Background image and Background gradient of an element.

You can have multiple Background images and gradients applied to the same element. These are layered on top of each other to create a composite.

Type

Select whether to use an image or gradient.

Options and behavior:

Image (default) - Set the background as an image
Gradient - Set the background as a gradient
None - Set the background to none

Image

Shown if image is selected in Type field.

Set a background image (or multiple background images) on the element.

Application and options:

Click on the thumbnail to select an image
For multiple images or gradients or a mix of both, click Add image or gradient to add another image
Multiple images can be dragged up and down to change their stacking order

Find more information about background image at https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

Drupal image style

Set a Drupal image style to be applied to the background image.

Size

Set the size of an element's background image.

Options and behavior:

Auto - Set the background to its original size
Contain - Scale the image as large as possible without cropping it
Cover - Scale the image as large as possible so no empty space occurs in the element. The image will be cropped if necessary
Numeric - Scale the image to the specified values in width and height
- Width - Specify the width in px or auto
- Height - Specify the width in px or auto

More information:

Find more information about background image size at https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Repeat

Set how the background image will repeat (or tile).

Options and behavior:

No repeat - Set the background not to repeat
Repeat - Set the background to repeat vertically and horizontally
Repeat horizontal - Set the background to repeat horizontally
Repeat vertical - Set the background image to repeat vertically

Find more information at https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat

Attachment

Set the background image to be fixed or scroll within the browser viewport.

Options and behavior:

scroll - Set the background to scroll with the element
fixed - Fix the background to the viewport
local - Set the background to scroll with the element's content if the element has a scrolling mechanism

Note: Background attachment fixed will not work on iOS and some other mobile devices.

Find more information at https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment

X-position

Set the horizontal position of the background image.

Options and behavior:

left - Set the background image to start from the left edge of the image
centre - Set the background image to start from the horizontal centre of the image
right - Set the background image to start from the right edge of the image

Note: Use with x offset for precise image positioning.

Find more information at https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-x

X-offset

Set the horizontal offset of the background image.

Behavior:

Positive numbers move the image away from the left edge or right edge depending on the value set on x position
Example: If the x position is set to right and the x offset is 100px the image will move 100px to the left

Expected value:

Enter a number
Negative values are accepted

Accepted units:

You can leave blank or specify a unit to be used.

blank - Just add a number and the value will be interpreted as pixels and be converted to rem's automatically if this behaviour is set within Base unit settings
px - The value will be applied in pixels
% - The value will be applied as a percentage of the parent width

Note: Additional units are accepted. For more information see https://www.w3schools.com/cssref/css_units.asp

Find more information at https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-x

Y-position

Set the vertical position of the background image.

Options and behavior:

top - Set the background image to start from the top edge of the image
centre - Set the background image to start from the vertical centre of the image
bottom - Set the background image to start from the bottom edge of the image

Find more information at https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-y

Y-offset

Set the vertical offset of the background image.

Behavior:

Positive numbers move the image away from the top edge or bottom edge depending on the value set on y position
Example: If the y position is set to bottom and the y offset is 100px the image will move 100px up

Expected value:

Enter a number
Negative values are accepted

Accepted units:

You can leave blank or specify a unit to be used.

blank - Just add a number and the value will be interpreted as pixels and be converted to rem's automatically if this behaviour is set within Base unit settings
px - The value will be applied in pixels
% - The value will be applied as a percentage of the parent width

Note: Additional units are accepted. For more information see https://www.w3schools.com/cssref/css_units.asp

Find more information at https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-y

Gradient

Shown if gradient is selected in Type field.

Set the background gradient of an element.

Expected value:

Select a gradient from the Gradient picker

Important

You can apply multiple gradients to the background to create different effects. For multiple images or gradients or a mix of both, click Add image or gradient to add another image.

More information:

Find more information at https://developer.mozilla.org/en-US/docs/Web/CSS/gradient

Did not find what you were looking for?

If this content did not answer your questions, try searching or contacting our support team for further assistance.

Set the Background image and Background gradient of an element.

You can have multiple Background images and gradients applied to the same element. These are layered on top of each other to create a composite.

Type

Select whether to use an image or gradient.

Options and behavior:

Image (default) - Set the background as an image
Gradient - Set the background as a gradient
None - Set the background to none

Image

Shown if image is selected in Type field.

Set a background image (or multiple background images) on the element.

Application and options:

Click on the thumbnail to select an image
For multiple images or gradients or a mix of both, click Add image or gradient to add another image
Multiple images can be dragged up and down to change their stacking order

Find more information about background image at https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

Drupal image style

Set a Drupal image style to be applied to the background image.

Set the size of an element's background image.

Options and behavior:

Auto - Set the background to its original size
Contain - Scale the image as large as possible without cropping it
Cover - Scale the image as large as possible so no empty space occurs in the element. The image will be cropped if necessary
Numeric - Scale the image to the specified values in width and height
- Width - Specify the width in px or auto
- Height - Specify the width in px or auto

Find more information about background image size at https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Set how the background image will repeat (or tile).

Options and behavior:

No repeat - Set the background not to repeat
Repeat - Set the background to repeat vertically and horizontally
Repeat horizontal - Set the background to repeat horizontally
Repeat vertical - Set the background image to repeat vertically

Set the background image to be fixed or scroll within the browser viewport.

Options and behavior:

scroll - Set the background to scroll with the element
fixed - Fix the background to the viewport
local - Set the background to scroll with the element's content if the element has a scrolling mechanism

Note: Background attachment fixed will not work on iOS and some other mobile devices.

Set the horizontal position of the background image.

Options and behavior:

left - Set the background image to start from the left edge of the image
centre - Set the background image to start from the horizontal centre of the image
right - Set the background image to start from the right edge of the image

Note: Use with x offset for precise image positioning.

Set the horizontal offset of the background image.

Positive numbers move the image away from the left edge or right edge depending on the value set on x position
Example: If the x position is set to right and the x offset is 100px the image will move 100px to the left

Enter a number
Negative values are accepted

You can leave blank or specify a unit to be used.

blank - Just add a number and the value will be interpreted as pixels and be converted to rem's automatically if this behaviour is set within Base unit settings
px - The value will be applied in pixels
% - The value will be applied as a percentage of the parent width

Note: Additional units are accepted. For more information see https://www.w3schools.com/cssref/css_units.asp

Set the vertical position of the background image.

Options and behavior:

top - Set the background image to start from the top edge of the image
centre - Set the background image to start from the vertical centre of the image
bottom - Set the background image to start from the bottom edge of the image

Set the vertical offset of the background image.

Positive numbers move the image away from the top edge or bottom edge depending on the value set on y position
Example: If the y position is set to bottom and the y offset is 100px the image will move 100px up

Enter a number
Negative values are accepted

You can leave blank or specify a unit to be used.

blank - Just add a number and the value will be interpreted as pixels and be converted to rem's automatically if this behaviour is set within Base unit settings
px - The value will be applied in pixels
% - The value will be applied as a percentage of the parent width

Note: Additional units are accepted. For more information see https://www.w3schools.com/cssref/css_units.asp

Shown if gradient is selected in Type field.

Set the background gradient of an element.

Select a gradient from the Gradient picker

Important

You can apply multiple gradients to the background to create different effects. For multiple images or gradients or a mix of both, click Add image or gradient to add another image.

Did not find what you were looking for?

If this content did not answer your questions, try searching or contacting our support team for further assistance.