{"id":112022,"date":"2023-03-09T09:00:52","date_gmt":"2023-03-09T03:30:52","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=112022"},"modified":"2024-07-29T16:06:25","modified_gmt":"2024-07-29T10:36:25","slug":"css-background-properties","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/css-background-properties\/","title":{"rendered":"CSS Background Properties"},"content":{"rendered":"

CSS (Cascading Style Sheets) is a language used to describe the presentation of a document written in a markup language. One of the main features of CSS is the ability to control the background of elements on a web page. CSS background properties allow developers to set the background color, background image, and other styling options for elements on a web page. In this tutorial, we will learn more about Background Properties in CSS.<\/p>\n

Background Properties in CSS<\/h3>\n

There are several background properties in CSS, including<\/p>\n

1. background color<\/strong>:<\/p>\n

It sets the background color of an element. Accepts any valid CSS color value (e.g. red, #ff0000, rgb(255, 0, 0)).<\/p>\n

Example<\/strong><\/p>\n

<html>\r\n<head>\r\n\u00a0<style>\r\n\u00a0div {\u00a0\r\nbackground-color: gray;\u00a0\r\n  }\u00a0\r\n<\/style>\r\n<\/head>\r\n<body>\r\n    <div>Welcome to DataFlair<\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output<\/strong><\/p>\n
\"repeat<\/a><\/p>\n
2. background-image:<\/strong><\/p>\n
It sets an image as the background of an element. Accepts any valid CSS image value (e.g. url(image.jpg), linear-gradient(…)).<\/p>\n
Example<\/strong><\/p>\n
\/* CSS *\/\r\ndiv {\r\n    background-image: url(image.jpg);\r\n    background-repeat: no-repeat;\r\n    background-position: center;\r\n}\r\n<\/pre>\n
\/* HTML *\/\r\n<div>This div has an image as its background<\/div><\/pre>\n
Output<\/strong><\/p>\n
\"setting<\/a> \"setting<\/a><\/p>\n
3. background-repeat:<\/strong><\/p>\n
It sets how the background image should be repeated. Can be set to repeat-x, repeat-y, no-repeat, or repeat (the default value).<\/p>\n
Example<\/strong><\/p>\n
\/* CSS *\/\r\ndiv {\r\n    background-image: url(image.jpg);\r\n    background-repeat: repeat-x;\r\n    width: 300px;\r\n    height: 100px;\r\n}\r\n<\/pre>\n
\/* HTML *\/ \r\n<div>This DataFlair div has a repeating background image in the x-axis<\/div><\/pre>\n
Output<\/strong><\/p>\n
 <\/p>\n
\"repeat<\/a><\/p>\n
4. background-position:<\/strong><\/p>\n
It sets the position of the background image. Can be set to any valid CSS length value (e.g. center, top left, 10px 20px).<\/p>\n
Example<\/strong><\/p>\n
\/* CSS *\/\r\ndiv {\r\n    background-image: url(image.jpg);\r\n    background-repeat: no-repeat;\r\n    background-position: center;\r\n    width: 300px;\r\n    height: 100px;\r\n}\r\n<\/pre>\n
\/* HTML *\/ \r\n<div>This DataFlair div has a background image centered in the middle<\/div><\/pre>\n
Output<\/strong><\/p>\n
\"background<\/a> \"background<\/a><\/p>\n
5. background-attachment:<\/strong><\/p>\n
It sets whether the background image scrolls with the element or is fix in place. Can be set to scroll (the default) or fix.<\/p>\n
Example<\/strong><\/p>\n
\/* CSS *\/\r\nbody {\r\n    background-image: url(image.jpg);\r\n    background-repeat: no-repeat;\r\n    background-position: center;\r\n    background-attachment: fixed;\r\n    width: 100%;\r\n    height: 100vh;\r\n}\r\n<\/pre>\n
\/* HTML *\/ \r\n<body> \r\n<div>This DataFlair div has a background image that is fixed in place<\/div> \r\n<\/body><\/pre>\n
Output<\/strong><\/p>\n
\"background<\/a><\/p>\n
6. background-size:<\/strong><\/p>\n
It sets the size of the background image. Can be set to any valid CSS length value or one of the keywords covered or contain.<\/p>\n
Example<\/strong><\/p>\n
\/* CSS *\/\r\ndiv {\r\n    background-image: url(image.jpg);\r\n    background-repeat: no-repeat;\r\n    background-position: center;\r\n    background-size: contain;\r\n    width: 300px;\r\n    height: 100px;\r\n}\r\n<\/pre>\n
\/* HTML *\/ \r\n<div>This DataFlair div has a background image that is scaled to fit the container<\/div><\/pre>\n
\"using<\/a><\/p>\n
 <\/p>\n
7. Using a shorthand property<\/h4>\n
\/* CSS *\/\r\ndiv {\r\n    background: blue url(image.jpg) no-repeat center;\r\n}\r\n<\/pre>\n
\/* HTML *\/ \r\n<div>This DataFlair div has a blue background with an image in the center that doesn't repeat<\/div><\/pre>\n
Output<\/strong><\/p>\n
\"background<\/a><\/p>\n
8. Background-repeat property:<\/h4>\n
CSS background-repeat property is useful to specify how a background image should repeat.<\/p>\n
The property can take on the following values:<\/p>\n