- CSS Basics
- CSS Tutorial
- CSS Where to Write
- CSS Syntax
- CSS Selectors
- CSS Combinators
- CSS Attribute Selectors
- CSS Pseudo Classes
- CSS Pseudo-Classes
- CSS :link :hover :active
- CSS :first-child
- CSS :first-of-type
- CSS :last-child
- CSS :last-of-type
- CSS :only-child
- CSS :only-of-type
- CSS :nth-child()
- CSS :nth-of-type()
- CSS :nth-last-child()
- CSS :nth-last-of-type()
- CSS :focus
- CSS :not()
- CSS :root
- CSS :empty
- CSS :target
- CSS :lang()
- CSS :valid
- CSS :invalid
- CSS :optional
- CSS :required
- CSS :in-range
- CSS :out-of-range
- CSS :enabled :disabled
- CSS :read-only
- CSS :read-write
- CSS Pseudo Elements
- CSS Pseudo-Elements
- CSS ::before
- CSS ::after
- CSS ::first-letter
- CSS ::first-line
- CSS ::marker
- CSS ::selection
- CSS Colors
- CSS Colors
- CSS rgb() and rgba()
- CSS hsl() and hsla()
- CSS Background
- CSS background
- CSS background-color
- CSS background-image
- CSS linear-gradient()
- CSS radial-gradient()
- CSS conic-gradient()
- CSS repeating-linear-gradient()
- CSS repeating-radial-gradient()
- CSS repeating-conic-gradient()
- CSS background-position
- CSS background-size
- CSS background-repeat
- CSS background-origin
- CSS background-clip
- CSS background-attachment
- CSS background-blend-mode
- CSS Border
- CSS border
- CSS border-style
- CSS border-style Values
- CSS border-width
- CSS border-color
- CSS border-top
- CSS border-top-style
- CSS border-top-width
- CSS border-top-color
- CSS border-bottom
- CSS border-bottom-style
- CSS border-bottom-width
- CSS border-bottom-color
- CSS border-left
- CSS border-left-style
- CSS border-left-width
- CSS border-left-color
- CSS border-right
- CSS border-right-style
- CSS border-right-width
- CSS border-right-color
- CSS border-top-left-radius
- CSS border-top-right-radius
- CSS border-bottom-left-radius
- CSS border-bottom-right-radius
- CSS border-radius
- CSS border-collapse
- CSS empty-cells
- CSS border-spacing
- CSS border-image
- CSS border-image-source
- CSS border-image-slice
- CSS border-image-width
- CSS border-image-outset
- CSS border-image-repeat
- CSS Fonts
- CSS font
- CSS font-style
- CSS font-variant
- CSS font-variant-caps
- CSS font-weight
- CSS font-size
- CSS line-height
- CSS font-family
- CSS font-stretch
- CSS font-kerning
- CSS font-face
- CSS font-feature-settings
- CSS Text
- CSS Text
- CSS color
- CSS text-decoration
- CSS text-decoration-line
- CSS text-decoration-color
- CSS text-decoration-style
- CSS text-underline-position
- CSS text-align
- CSS text-align-last
- CSS text-justify
- CSS letter-spacing
- CSS word-spacing
- CSS text-shadow
- CSS text-transform
- CSS white-space
- CSS text-indent
- CSS word-wrap
- CSS overflow-wrap
- CSS word-break
- CSS text-overflow
- CSS hyphens
- CSS direction
- CSS unicode-bidi
- CSS writing-mode
- CSS Padding & Margin
- CSS Box Model
- CSS padding
- CSS padding-top
- CSS padding-right
- CSS padding-bottom
- CSS padding-left
- CSS margin
- CSS margin-top
- CSS margin-right
- CSS margin-bottom
- CSS margin-left
- CSS Padding Vs Margin
- CSS Dimensions
- CSS Dimensions
- CSS height
- CSS max-height
- CSS min-height
- CSS width
- CSS max-width
- CSS min-width
- CSS overflow
- CSS overflow-x
- CSS overflow-y
- CSS Multi-Column Layout
- CSS Multi-Column Layout
- CSS columns
- CSS column-width
- CSS column-count
- CSS column-rule
- CSS column-rule-width
- CSS column-rule-style
- CSS column-rule-color
- CSS column-span
- CSS column-fill
- CSS Display
- CSS display
- CSS inline Vs block
- CSS inline Vs inline-block
- CSS flex Vs inline-flex
- CSS inline-flex Vs inline-block
- CSS flex Vs grid
- CSS grid Vs inline-grid
- CSS Float and Position
- CSS float
- CSS clear
- CSS Align
- CSS position
- CSS left
- CSS right
- CSS top
- CSS bottom
- CSS Style List Marker
- CSS Style List Marker
- CSS list-style
- CSS list-style-type
- CSS list-style-position
- CSS list-style-image
- CSS Outline
- CSS outline
- CSS outline-width
- CSS outline-style
- CSS outline-color
- CSS outline-offset
- CSS Effects
- CSS Effects
- CSS Gradients
- CSS Shadows
- CSS box-shadow
- CSS opacity
- CSS Transforms
- CSS transform
- CSS translateX()
- CSS translateY()
- CSS translateZ()
- CSS translate()
- CSS translate3d()
- CSS scaleX()
- CSS scaleY()
- CSS scaleZ()
- CSS scale()
- CSS scale3d()
- CSS rotateX()
- CSS rotateY()
- CSS rotateZ()
- CSS rotate()
- CSS rotate3d()
- CSS skewX()
- CSS skewY()
- CSS skew()
- CSS matrix()
- CSS matrix3d()
- CSS perspective() Function
- CSS perspective Property
- CSS perspective-origin
- CSS transform-style
- CSS transform-origin
- CSS 2D Transform
- CSS 3D Transform
- CSS Transition
- CSS transition
- CSS transition-property
- CSS transition-duration
- CSS transition-timing-function
- CSS transition-delay
- CSS Animation
- CSS animation
- CSS @keyframes
- CSS animation-name
- CSS animation-duration
- CSS animation-timing-function
- CSS animation-delay
- CSS animation-iteration-count
- CSS animation-direction
- CSS animation-fill-mode
- CSS animation-play-state
- CSS Grid Layout
- CSS Grid Layout
- CSS gap
- CSS column-gap
- CSS row-gap
- CSS grid-area
- CSS grid-column-start
- CSS grid-column-end
- CSS grid-row-start
- CSS grid-row-end
- CSS grid-template
- CSS grid-template-columns
- CSS grid-template-rows
- CSS grid-template-areas
- CSS grid-auto-columns
- CSS grid-auto-rows
- CSS grid-auto-flow
- CSS grid-column
- CSS grid-row
- CSS Template Layout
- CSS Flex Layout
- CSS FlexBox
- CSS flex-direction
- CSS flex-wrap
- CSS flex-flow
- CSS justify-content
- CSS align-content
- CSS align-items
- CSS flex-grow
- CSS flex-shrink
- CSS flex-basis
- CSS flex
- CSS align-self
- CSS order
- CSS Misc
- CSS Length Units
- CSS Style Link
- CSS Navigation Bar
- CSS Style Image
- CSS Style Tables
- CSS table-layout
- CSS caption-side
- CSS Create Frames
CSS background
The CSS background property is used to change the background of an element. For example:
<!DOCTYPE html> <html> <head> <style> #mydiv{border: 3px solid coral; padding: 22px; background: lightblue;} </style> </head> <body> <div id="mydiv"> <h2>The background Property</h2> <p>This is an example of background property in CSS.</p> </div> </body> </html>
The background Property
This is an example of background property in CSS.
Note - Prior to Hypertext Markup Language (HTML) 4, the background of a Web page was set by using the bgcolor attribute of the BODY element. However, from HTML4 onwards, the background is controlled by using Cascading Style Sheet (CSS).
Note - To build a better UI (User Interface) for your web application, you have to get the complete idea, on how to design the background of an element or the whole web page.
CSS background Syntax
The syntax of background property in CSS, is:
background: background-color background-image background-position/background-size background-repeat background-origin background-clip background-attachment;
Therefore, the background property can also be used as shorthand for these properties:
- background-color
- background-image
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
Important - If we include background-size property, then a slash (/) must be included to separate it from the background-position property. For example:
background: url(images/sml-plnt-fl.jpg) 8px 12px/320px 180px;
positioned the background image to 8px from the left and 12px from the top of element. And the size of the image will be 320px wide and 180px high.
CSS background Example
<!DOCTYPE html> <html> <head> <style> #a, #b, #c, #d, #e, #f, #g{border: 4px dotted crimson; height: 240px; margin-bottom: 20px; padding: 20px;} #a{background: url("images/sml-plnt-lf.jpg") no-repeat border-box;} #b{background: url("images/sml-plnt-lf.jpg") 4px 12px/140px 80px no-repeat;} #c{background: url("images/sml-plnt-lf.jpg") 4px 12px/140px 80px no-repeat border-box;} #d{background: url("images/sml-plnt-lf.jpg") center no-repeat;} #e{background: url("images/sml-plnt-lf.jpg") repeat-x;} #f{background: url("images/sml-plnt-lf.jpg") 40px 80px no-repeat;} #g{background: repeating-conic-gradient(green 10%, black, purple 25%) padding-box;} </style> </head> <body> <h3>background: url("images/sml-plnt-lf.jpg") no-repeat border-box</h3> <div id="a"> </div> <h3>background: url("images/sml-plnt-lf.jpg") 4px 12px/140px 80px no-repeat</h3> <div id="b"> </div> <h3>background: url("images/sml-plnt-lf.jpg") 4px 12px/140px 80px no-repeat border-box</h3> <div id="c"> </div> <h3>background: url("images/sml-plnt-lf.jpg") center no-repeat</h3> <div id="d"> </div> <h3>background: url("images/sml-plnt-lf.jpg") repeat-x</h3> <div id="e"> </div> <h3>background: url("images/sml-plnt-lf.jpg") 40px 80px no-repeat</h3> <div id="f"> </div> <h3>background: repeating-conic-gradient(green 10%, black, purple 25%) padding-box</h3> <div id="g"> </div> </body> </html>
background: url("images/sml-plnt-lf.jpg") no-repeat border-box
background: url("images/sml-plnt-lf.jpg") 4px 12px/140px 80px no-repeat
background: url("images/sml-plnt-lf.jpg") 4px 12px/140px 80px no-repeat border-box
background: url("images/sml-plnt-lf.jpg") center no-repeat
background: url("images/sml-plnt-lf.jpg") repeat-x
background: url("images/sml-plnt-lf.jpg") 40px 80px no-repeat
background: repeating-conic-gradient(green 10%, black, purple 25%) padding-box
« Previous Tutorial Next Tutorial »