Version:

    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 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

    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

    DX8 knowledge base icon

    Frequently asked questions

    Get instant answers to common questions. Available online 24/7.

    Find answers

    Raise a ticket icon

    Raise a support ticket

    To raise a ticket, sign into Acquia Cloud and select Help in the top menu.

    Raise support ticket

    Acquia

    Copyright © 2020 Acquia, Inc. All Rights Reserved. Drupal is a registered trademark of Dries Buytaert.