Basic CSS Tutorial : Create Multiple Background Images For Website

Share:

Basic CSS Tutorial : Create Multiple Background Images For Website. Css with background images, create a website design will be more easy and interesting. We can put a background color on a web page or image as you wish and taste. In this tutorial, we will discuss in detail about the background image and css css multiple background images.
Basic CSS Tutorial : Create Multiple Background Images For WebsiteThis css script can be implemented when we create a website design. In the previous tutorial, I had a lot of use it and some of them are in post here and here. You are curious to know how to create background images on a website simply by using css code ? Just go ahead, read the tutorial below :

Basic CSS Tutorial : Create Multiple Background Images For Website

Css Background Images
To put an image as the background, use the background-image property. Set as background image should be at the same folder as the folder where to save the document css / html it easy for writing. But we can also take pictures of other places on the internet, which in writing should include the address / url is the complete picture.
Example of CSS code untuk membuat background image :

background-image:url(http://domain.com/images-url-file.png);

CSS Background Image Property
• Background Repeat
To fill the pages that use images as background, by default placement of the image will repeat (repeat) either vertically or horizontally. But we can change it by using the background-repeat property, by selecting the value:
“Repeat-x” (for horizontal repetition)
“Repeat-y” (for vertical repetition)
“No-repeat” (if you do not want a repetition)
Example of CSS code to create background image repeat :

background-repeat:no-repeat;

• Background Size
Images that we use as a background may have a size that does not fit with what we want because that to overcome them, you can set the size of the image using the background-size property.
Example of CSS code to create background image size :

background-size:1350px 500px;

• Background Position
Background-position property defines the initial position when used as a background image. Here’s some background-position property :
top left, top center, top right, center left; center center, center right, bottom left, bottom center, bottom right, x% y% , xpos ypos, xpx ypx
Example of CSS code to create background image position :

background-position:top center;

Css Multiple Background Images
Combining multiple images into one image no longer be done by using image editing software. we can use css multiple background images. With this property, multiple images can be combined into one to generate a new image. We even can also combine animated gif image into it so that the new image is generated that will certainly look like animated images made ​​from software. Interesting, right ?

Let’s continue the discussion. So that the image can be displayed perfectly in accordance with our wishes, some other background properties can be added to it so that the position of the background, repeating background and size can be arranged.
Example of CSS code to create multiple background images :

background-image:url(image-1.jpg), url(image-2.gif), url(image-3.png);
background-repeat:no-repeat ,repeat-x, repeat-y;
background-position:left center,top center, 100px 500px;
background-size: 65px 40px, 20px 50px,100% 100%;

The following examples of the use of css multiple background images :
css-multiple-background-images.html

<html>
<head>
<title> Basic CSS : Create Multiple Background Images For Website | Tutorial.World.Edu </title>
<style>
.image{
padding-top:30px;
font-family:Palatino, 'Book Antiqua', Georgia, Garamond, 'Times New Roman', Times, serif;
font-size:32px;
font-weight:bold;
color:#555;
text-align:center;
height:550px;
background-color:#CEECF5;
background-image:url('http://2.bp.blogspot.com/-DmWvXvXOdLk/UoN7YT92TWI/AAAAAAAABJ8/jtobVB7J0WE/s1600/Tutorial+World+Edu+Create+CSS+Multiple+Background+Images+For+Website+1.png'), url('http://4.bp.blogspot.com/-QuDVpqkRgdA/UoN7jt4-9II/AAAAAAAABKE/2jinK4h1SUo/s1600/Tutorial+World+Edu+Create+CSS+Multiple+Background+Images+For+Website+2.png'), url('http://4.bp.blogspot.com/-dCL0a4R21G8/UoN7pcVGuLI/AAAAAAAABKM/N-FARqAHYNE/s1600/Tutorial+World+Edu+Create+CSS+Multiple+Background+Images+For+Website+3.png'), url('http://4.bp.blogspot.com/-05YohdWKKdU/UoN7vm8c9PI/AAAAAAAABKU/tK7cZGWm1b0/s1600/Tutorial+World+Edu+Create+CSS+Multiple+Background+Images+For+Website+4.png'), url('http://4.bp.blogspot.com/-05YohdWKKdU/UoN7vm8c9PI/AAAAAAAABKU/tK7cZGWm1b0/s1600/Tutorial+World+Edu+Create+CSS+Multiple+Background+Images+For+Website+4.png'), url('http://3.bp.blogspot.com/-A3XZ3I2TkFk/UoN73-UXgkI/AAAAAAAABKc/fI61b-_MK_E/s1600/Tutorial+World+Edu+Create+CSS+Multiple+Background+Images+For+Website+5.png'), url('http://3.bp.blogspot.com/-JSXCzP_LbUM/UoN7_TXdZxI/AAAAAAAABKk/RTPedgoLNzY/s1600/Tutorial+World+Edu+Create+CSS+Multiple+Background+Images+For+Website+6.png');
background-repeat:no-repeat,repeat-x,repeat-x, no-repeat, no-repeat, no-repeat,no-repeat;
background-position:top center, 0px 500px, 0px 270px, 300px 150px, 150px 250px, 900px 220px, 300px 420px;
background-size:1350px 500px, 80px 79px, 900px 230px, 210px 96px, 210px 96px, 250px 200px, 50px 50px;
}
.image a{
text-decoration:none;
}
</style>
</head>
<body>
<div  class="image"><a href="http://tutorial.world.edu/website-programming/basic-css-create-multiple-background-images-for-website/">Create Multiple Background Images For Website [Basic CSS]</a><br/><a href="http://tutorial.world.edu">Tutorial.World.Edu</a></div>
</body>
</html>

The result will be as shown below :
Basic CSS Tutorial : Create Multiple Background Images For WebsiteNow is the time to put into practice what we have learned in this tutorial. Good luck …
Thanks for reading Basic CSS Tutorial : Create Multiple Background Images For Website

[Tutorial.World.Edu]

2 thoughts on “Basic CSS Tutorial : Create Multiple Background Images For Website

Leave a Reply

Your email address will not be published. Required fields are marked *