ITSourceCode.com

We Exist to Provide 100% Free Source Code and Tutorials

Custom Search

17-CSS Multi-Background Property

CSS Multi-Background Property helps in adding one or more images at a time without  even using HTML code, A user  can have as many  images as per  his requirement in just a single page.

 

  1. <html>
  2.    <head>
  3.    
  4.       <style>
  5.          #multibackgroundcreation {
  6.             background-image: url(images/logo.png);
  7.             background-position: left top, left top;
  8.             background-repeat: no-repeat, repeat;
  9.             padding: 65px;
  10.          }
  11.       </style>
  12.      
  13.    </head>
  14.    <body>
  15.    
  16.       <div id="multibackgroundcreation">
  17.          <h1>Happiness</h1>
  18.          <p>Happiness is a gift sent from heaven, a smile graced on a face and a laugh fixed with a beautiful melody. Happiness is beauty in a song that you've never heard, but know all the words to.</p>
  19.  
  20. <p>Happiness is doing a good deed to someone, giving a kiss to your parents on a regular basis, telling someone you love them because life is short and being happy is the first thing you want to be. Happiness is closing your eyes, taking a deep breath and getting tears in your eyes because you just love life</p>.
  21.  
  22. <p>Happiness is staying simple but being the best person you can ever be. Happiness is writing a story about heartbreaks, disappointments that turn into success and well, happiness. Happiness is dancing to a beat that carries you on a thin air of happily ever afters and people who care.</p>
  23.  
  24. <p>Happiness is dreaming of being free, waking up and achieving up. Happiness is finding something you never expected to find—and love it. Happiness is a round-way ticket to heaven of smiling faces and friendly crowds.</p>
  25.  
  26. <p>Being loved is happiness. Happiness is a word you can't explain, but your heart does that certain jump that makes you smile endlessly. Being happy is love.<p>
  27.  
  28. And now, tell me, how long have you been happy?
  29.  
  30. <p>Have you ever tried waking up one morning, looking at the mirror, smiling at the sun with no particular reason? Have you tried sitting down, taking it in, crying, and thinking it's you against the world and the next thing a hand touches your shoulder and you don't remember why you've been sitting in the corner with tears in your eyes at all. Have you tried doing something without any hesitations and you're glad you did? Have you tried praying to God with a smile on your face, thanking him for everything you've become and everything you have and reached?</p>
  31.  
  32.      </div>
  33.      
  34.   </body>
  35. </html>

You can even change the size of the multiple backgrounds by the following code:

  1. #multibackground {
  2.    background: url(images/logo.png) left top no-repeat, url(images/ring.png) right bottom no-repeat, url(images/rome.gif) left top repeat;
  3.    background-size: 60px, 140px, auto;
  4. }

 

All this helps when a user wants to create a webpage like where several key points are given and you want to set the theme in background defining that keypoint.

Facebook Comments

Check Your Domain Ranking

Leave a Reply

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

ITSourceCode.com © 2016 Frontier Theme

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!