Friday, 12 August 2016

Background Image | Set Image as Background in HTML with CSS

"HTML Background Image" HTML Background images and colors.Use Image as background.


Insert in a web page or website using CSS/CSS3 help to make website/web page attractive.

1.Set or Add Background image or colors of your choice as Background in the HTML 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:

<!doctype html>
<html amp lang="en">
  <head>
    <title>CSS Background</title>
<style>
body
{
background-image: url("hi.png");
background-repeat:repeat-y;
background-position:right top;
background-attachment:fixed;
}
p{color:green;font-size:2em}
</style>
  </head>
HTML Background Images
  <body>
    <h1>Background</h1>
<p>
We have these properties for Background setting that can be used in web pages or website with help of CSS</br>
1.background-image</br>
2.background-attachment</br>
3.background-repeat</br>
4.background-position</br>
</p>
  </body>
</html>

HTML Background Image
HTML Background Image

HTML Background Images

1 comment:

  1. http://maxclashgems.com Everybody uses this now! (ufgRR)

    ReplyDelete

Leave a Reply!