.my-div{
background-color: #00f; /* Blue */
}
.div-image{
background-image: url("Image Path");
background-position:
top right | left center | bottom center
top left | right center | bottom right
top center | center center | bottom left ;
/* Use any option that met your requirements*/
background-size: cover; /* Set the image to cover all the div */
background-repeat: no-repeat; /* Commonly used for that situation */
background-attachment: fixed; /* the image will stay with you while scrolling same as position: fixed*/
/* Use background-attachment: scroll [Default Value]; to remove fixed effect */
}
/*
Background shortHand
background: background-color background-image background-repeat background-position
*/.card {
/* other styles */
background: rgba(255, 255, 255, .7);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}/* Background-Image: Sets the background image of an element */
background-image: url("clashingcode");
/* Background-Position: The position property is mainly used to specify the positioning of the image */
background-position: right top;
/* Background-Repeat: Defines how a specified background image is repeated. The repeat-x value will repeat the image horizontally(x-axis) while the repeat-y value will repeat the image vertically(y-axis) */
background-repeat: repeat-x;
/* Background-Attachment: specifies the kind of attachment of the background image(scroll with the content or be fixed respect the container). */
background-attachment: scroll;
/* Background-Color: Sets the background color of an element */
background-color: blue;
/* Background: Shorthand Property */
background: background-color background-image background-repeat background-attachment background-position;/* Color (Example: red): */
html,body {
background-color: red;
}
/* Image (Example: your.picture): */
html,body {
background-image: url("your.picture");
}/* There are several ways of setting a background, like in HTML or CSS
(I advise you to set it in CSS) You can set a colour or image with
the same attribute: */
/* Setting the colour in a div, body, html (html is the whole page),
class, and id: */
div, body, html, .myClass, #myId {
background-color: grey;
}
/* Setting the image: */
div {
background: url("img.jpg");
}
/* If you want to call an image from a specific directory use a '/'.
For example, the image is in a folder called 'Images' (the HTML
and CSS files have to be in the same folder as the 'Images folder') */
div {
background: url("Images/img.jpg");
}<!DOCTYPE HTML>
<head>
<title>CSS Background Repeat</title>
<style>
body {
background-image: url("hello.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Programming Tutorials In Telugu</h1>
<p>This is paragraph.</p>
This is normal text.
</body>
</html>