bugl
bugl
HomeLearnPatternsPathsSearchPremium
HomeLearnPatternsPaths
Learn/CSS/Advanced Styling
CSS•Advanced Styling

CSS Background Clip

CSS background-clip Property

The CSS background-clip property defines how far the background (color, image, or gradient) should extend within an element.

This property can have one of the following values:

  • border-box - The background extends behind the border. This is default
  • padding-box - The background extends to the inside edge of the border
  • content-box - The background extends to the edge of the content box
background-clip
background-clip

CSS Advanced Background Properties

PropertyDescription
backgroundA shorthand property for setting all the background properties in one declaration
background-clipSpecifies the painting area of the background
background-imageSpecifies one or more background images for an element
background-originSpecifies where the background image(s) is/are positioned
background-sizeSpecifies the size of the background image(s)

Previous

CSS Background Origin

Next

CSS Colors

This chapter

Overview
53

Lessons

154m

Read time

1. CSS Rounded Corners2. Sass Tutorial3. CSS Border Images4. CSS Multiple Backgrounds5. CSS Background Size6. CSS Background Origin7. CSS Background Clip8. CSS Colors9. CSS Color Keywords10. CSS Gradients11. CSS Radial Gradients12. CSS Conic Gradients13. CSS Shadow Effects14. CSS Box Shadow15. CSS Text Effects16. CSS Custom Fonts17. CSS 2D Transforms18. CSS 2D Transform Scale19. CSS 2D Transform Skew / Matrix20. CSS 3D Transforms21. CSS Transitions22. CSS Transition Timing23. CSS Animations24. CSS Animation Timing25. CSS Animation Properties26. CSS Tooltip27. CSS Tooltip Arrows28. CSS Styling Images29. CSS Image Effects30. CSS Image Hover Overlays31. CSS Responsive Modal Images32. CSS Centering Images33. CSS Image Filter Effects34. CSS Image Shapes35. CSS object-fit Property36. CSS object-position Property37. CSS Masking38. CSS Gradient Mask Layers39. CSS SVG Mask Layers40. CSS Styling Buttons41. CSS Button Hover Effects42. CSS Button Groups43. CSS Pagination Styles44. CSS Multiple Columns45. CSS Column Rules46. CSS User Interface47. CSS Variables - var() Function48. CSS Overriding Variables49. CSS Variables and JavaScript50. CSS Variables in Media Queries51. CSS @property Rule52. CSS Box Sizing53. CSS Media Queries

On this page

CSS background-clip PropertyCSS Advanced Background Properties