.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
*/
/* 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;
body {
height: 100vh;
background: url(relative path or url in double quotes) | linear-gradient()
background-size: cover | contain | any unit value e.g. 1500px;
background-attachment: fixed | local | scroll;
background-position: x-offset(values:left,center,right) y-offset(values:top,center,bottom);
/* or single value for both x & y-offset */
background-repeat: repeat (enabled by default) | no-repeat;
/* some of them will only work provided height of the container */
/* That's pretty much it folks */
/* I can't cover details of each value. You'd have to search it */
}
/* 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>