Here are the steps to insert Background image using CSS/CSS3:-
1.You can easily set image of your choice as Background in the web page or website with the help of CSS/CSS3.2.For this, you can use inline, Internal or External CSS as your comfortability.
3.We have these properties for Background setting:-
1.background-image
2.background-attachment
3.background-repeat
4.background-position
background-image Property defines an image use as Background for your web page or website.
Example:
background-image: url("path");
background-attachment property is used to to make your
Background Image Fixed while scrolling your page.
Example:
background-attachment: fixed;
background-repeat property is used to repeat Background Image in Vertical or horizontal direction.By Default the background-image property repeats an image in both directions horizontally and vertically.you can use the background-repeat property to your background image vertically or horizontally.
if you want to repeat your background image only in horizontally then you have to use following the property.
Example:
background-repeat: repeat -x;
if you want to repeat your background image only in vertical direction then you have to use following the property.
Example:
background-repeat: repeat -y;
background-position property defines the location where your background image will be displayed.
it will show your background image at fixed or specified position.
if you want to show your background image at the right top position then you have to use following the property.
Example:
background-position: right top;
if you want to show your background image at the left top position then you have to use following the property.
Example:
background-position: left top;
if you want to show your background image at the center top position then you have to use following the property.
Example:
background-position: center top;
you can also use bottom left / right /center position.
Otherwise, if you want color as your background then you can use this property:
background-color: red; //a valid color name.
background-color: #000000; // a valid hexadecimal value.
background-color: rgb(255,0,0) //a valid RGB value.
Example:
body
{
background-image: url("hi.png");
background-repeat:repeat-y;
background-position:right top;
background-attachment:fixed;
}
p{color:green;font-size:2em}
Background
We have these properties for Background setting that can be used in web pages or website with help of CSS
1.background-image
2.background-attachment
3.background-repeat
4.background-position
