Welcome Guest! (App Version 3.1)

websitnero logo name

Background Images

Applying Background Images to HTML Elements

Till CSS2 you could only have background of HTML elements as various colors. Like you provide green or blue color to the background of any element. But, what if you would like to add some gradient or image as background of that element? Was it possible? I would say, yes, you could do that, but with some hassle. You could provide backgrounds to some elements like buttons but not same with divs or paragraphs.

Now, in CSS3 you can simple add one property named background-image with a set of values and Yoooooo! The div or paragraph will have image as its background. This is quite useful for making user-friendly and super-interactive Web pages.

Example

<head>
<style>
div{
  background-image: url('tree.png'), url('greenField.png');
  background-size:auto, cover;
  width:400px;
  height:300px;
  background-repeat:no-repeat, no-repeat;
  background-position: 250px 20px, 0px 0px; 
}
</style> 
</head>

<body> 
  <div>This is a div.</div>
</body>
WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.