Skip to main content

BACKGROUND CSS

(1)background  color :

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: #b0c4de;
}
</style>
</head>
<body>

<h1>My CSS web page!</h1>
<p>Hello world! This is a Vissicomp.com example.</p>

</body>
</html>


(2)Background-image   :

(a)<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("paper.gif");
}
</style>
</head>
<body>

<h1>Hello World!</h1>

</body>
</html>

(b)    background-repeat: repeat-x;

 <!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
}
</style>
</head>
<body>

<h1>Hello World!</h1>

</body>
</html>

(c)    background-repeat: no-repeat;

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>Vissicomp background image example.</p>
<p>The background image is only showing once, but it is disturbing the reader!</p>

</body>
</html>

(d) background-position: right top;

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image:url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    margin-right: 200px;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p> Vissicomp  background  no-repeat,  set  position  example.</p>
<p>Now the background image is only shown once, and positioned away from the text.</p>
<p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p>

</body>
</html>

(e) background-position: center;

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url('smiley.gif');
    background-repeat: no-repeat;
    background-attachment : fixed;
    background-position :center;
}
</style>
</head>
<body>
</body>
</html>




(f) background-repeat: repeat-y;

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("paper.gif");
    background-repeat: repeat-y;
}
</style>
</head>
<body>
<p>repeat-y will repeat a background image only vertically.</p>
</body>
</html>

Initial code:

div {
    background-image:url(smiley.gif);
    background-repeat:initial;
}


div {
    background-image:url(smiley.gif);

    background-repeat:repeat;

}




 
(g)background-size:


  <!DOCTYPE html>
<html>
<head>
<style> 
body {
    background: url("img_flwr.gif");
    background-size: 80px 60px;
    background-repeat: no-repeat;
    padding-top: 40px;
}
</style>
</head>
<body>
 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Original image: 
 
<img src="img_flwr.gif" alt="Flowers" width="224" height="162" />
.
</p>
 
</body>

</html>

Comments

Post a Comment

Popular posts from this blog

Jquery Sliding

jQuery Sliding Methods:-  With jQuery you can create a sliding effect on elements. jQuery has the following slide methods: slideDown() slideUp() slideToggle() (1)slideDown()  example:- <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){   $("#flip").click(function(){     $("#panel").slideDown("slow");   }); }); </script> <style> #panel, #flip {   padding: 5px;   text-align: center;   background-color: #e5eecc;   border: solid 1px #c3c3c3; } #panel {   padding: 50px;   display: none; } </style> </head> <body> <div id="flip">Click to slide down panel</div> <div id="panel">Hello world!</div> </body> </html> (2)sldeUP()  example:- <html> <head> <script src="https://ajax.
11 comments
Read more

layout code example:-

<!DOCTYPE html> <html lang="en"> <head>   <title>Bootstrap Example</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </head> <body>  <section>       <div class="container">         <header>           <h3  class="text-center">Services</h3>           <p class="text-center">Laudem latine pe
3 comments
Read more

Juqery fade

jQuery Fading Methods :-  With jQuery you can fade an element in and out of visibility. jQuery has the following fade methods: fadeIn() fadeOut() fadeToggle() fadeTo() jQuery fadeIn() Method The jQuery fadeIn() method is used to fade in a hidden element. Syntax:- $(selector).fadeIn(speed,callback); <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){   $("button").click(function(){     $("#div1").fadeIn();     $("#div2").fadeIn("slow");     $("#div3").fadeIn(3000);   }); }); </script> </head> <body> <p>Demonstrate fadeIn() with different parameters.</p> <button>Click to fade in boxes</button><br><br> <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><
Post a Comment
Read more