Teachnique
      CourseRoadmaps
      Login

      IntroductionSyntaxSelectorsInclusionMeasurement UnitsColorsBackgroundsFontsTextImagesLinksTablesBordersBorder BlockBorder InlineMarginsListsPaddingCursorOutlinesDimensionScrollbarsInline BlockDropdownsVisibilityOverflowClearfixFloatArrowsResizeQuotesOrderPositionHyphensHoverDisplayFocusZoomTranslateHeightHyphenate CharacterWidthOpacityZ-IndexBottomNavbarOverlayFormsAlignIconsImage GalleryCommentsLoadersAttr SelectorsCombinatorsRootBox ModelCountersClipWriting ModeUnicode-bidimin-contentAllInsetIsolationOverscrollJustify ItemsJustify SelfTab SizePointer EventsPlace ContentPlace ItemsPlace SelfMax Block SizeMin Block SizeMix Blend ModeMax Inline SizeMin Inline SizeOffsetAccent ColorUser Select

      GridGrid LayoutFlexboxVisibilityPositioningLayersPseudo ClassesPseudo Elements@ RulesText EffectsPaged MediaPrintingLayoutsValidationsImage SpritesImportantData Types

      TutorialRounded CornerBorder ImagesMulti BackgroundColorGradientsBox ShadowBox Decoration BreakCaret ColorText ShadowText2d transform3d transformTransitionAnimationMulti columnsBox SizingTooltipsButtonsPaginationVariablesMedia QueriesFunctionsMath FunctionsMaskingShapesStyle ImagesSpecificityCustom Properties

      IntroductionViewportGrid ViewMedia QueriesImagesVideosFrameworks

      Questions and AnswersQuick GuideReferencesColor ReferencesWeb browser ReferencesWeb safe fontsUnitsAnimation

      PX to EM converterColor Chooser & Animation

      Useful ResourcesDiscussion

      Feedback

      Submit request if you have any questions.

      Course
      Backgrounds

      CSS Tutorial

      This CSS tutorial is designed for beginners to navigate through the essentials and intricate aspects of CSS styling. Upon finishing this tutorial, participants will possess a comprehensive understanding of CSS, setting a solid foundation for further exploration and mastery. This guide aims to equip you with the skills necessary to transform your visions into visually appealing web designs, laying the groundwork for your journey towards becoming an accomplished web designer.

      Background

      The background property of CSS is used to set the background of an element. It can be used to apply a single background image or multiple background images, as well as defining the background color, size, position, repeat behavior, and other related properties.
      It is a versatile tool for styling the appearance of elements and adding visual interest to web pages.
      The background is a shorthand for the following properties:
      • AI: Specifies the position of the background relative to the viewport, either fixed or scrollable.
      • AI: Controls how far a background image extends beyond the element's padding or content box.
      • AI: Sets the background color of an element.
      • AI: Sets one or more background image(s) on an element.
      • AI: Sets the origin of the background.
      • AI: Sets the initial position of each image in a background.
      • AI: Controls the repetition of an image in the background.
      • AI: Controls the size of the background image.

      Overview

      • The background property allows to set one or multiple layers of background, separated by commas.
      • Each layer in the background may have zero or atleast one occurrence of the following values:
        • <attachment>
        • <bg-image>
        • <position>
        • <bg-size>
        • <repeat-style>
      • If <bg-size>is to be added, it must be included immediately after AI, separated with '/'. For example: "left/50%".
      • Value of <box> can be included zero, one or two times. Based on the number of occurrences, following values are set:
        • once: sets the values for both background-origin and background-clip.
        • twice: first sets the value of background-origin and second sets the value of background-clip.
      • The value of AI may be included in the last layer specified as background.

      Possible Values

      Following are the possible values that the background shorthand property can have:
      • <attachment>: Specifies the position of the background, whether fixed or scrollable. Default is scroll.
      • <box>: Default is border-box and padding-box respectively.
      • <background-color>: Sets the color of the background. Default is transparent.
      • <bg-image>: Sets the one or more background image. Default is none.
      • <position>: Sets the initial position of the background. Default is 0% 0%.
      • <repeat-style>: Controls the repetition of the image in background. Default is repeat.
      • <bg-size>: Controls the size of the background image. Default is auto.

      Syntax

      background = background-color | bg-image | bg-position / bg-size | repeat-style | attachment | box;

      CSS Background - With Image And Background color

      Here is an example of setting a background using the shorthand property background, where an image and background color is specified:
      <html>
      <head>
      <style>  
         body {
            background: url('images/scenery2.jpg') center/40% 50% no-repeat fixed padding-box content-box lightblue;
         }
      </style>
      </head>
      <body>
         <h2>Shorthand Background</h2>
      </body>
      </html>

      CSS Background - Image Repeat

      Here is an example of setting a background using the shorthand property background, where image is repeated:
      <html>
      <head>
      <style>  
         body {
            background: url('images/scenery2.jpg') repeat fixed padding-box content-box lightblue;
         }
      </style>
      </head>
      <body>
         <h2 style="color: white;">Shorthand Background - background repeated</h2>
      </body>
      </html>

      CSS Background - Image With Background Color

      Here is an example of setting a background using the shorthand property background, where two images are added and a background color:
      <html>
      <head>
      <style>  
         body {
            background: url('images/orange-flower.jpg') right bottom/30% 60% no-repeat, 
            url('images/pink-flower.jpg') left top/30% 60% no-repeat lightgoldenrodyellow;
         }
      </style>
      </head>
      <body>
         <h2 style="color: black; text-align: center;">Shorthand Background - two images</h2>
      </body>
      </html>

      CSS Backgrounds- Related Properties

      All the properties related to background are listed in the table below:
      Property
      Description
      AI
      Shorthand for background related properties.
      AI
      Specifies the position of the background relative to the viewport, either fixed or scrollable.
      AI
      Controls how far a background image extends beyond the element's padding or content box.
      AI
      Sets the background color of an element.
      AI
      Sets one or more background image(s) on an element.
      AI
      Sets the origin of the background.
      AI
      Sets the initial position of each image in a background.
      AI
      Sets the initial horizontal position of each image in a background.
      AI
      Sets the initial vertical position of each image in a background.
      AI
      Controls the repetition of an image in the background.
      AI
      Controls the size of the background image.
      AI
      Determines how an element's background images blend with each other.