Welcome Guest! (App Version 3.1)

websitnero logo name

Background and Color

Changing Background and Font Colors

After setting the dimensions (height and width) of an html element, next comes filling it with color. Background property represents the background-color of an element and Color property represents the text-color of an element. By adding these 2 properties we change the look and feel of an html element. For background, we may at times also add custom images for an element.

In the following example, we have a paragraph, in which we are setting the background-color as green and text-color as red.

Example

<head>
<style>
div {
  background: yellow;
  color: red;
}
</style>
</head>

<body> 
  <div>This is a div.</div>
</body> 

Adding Image as Background to an Element

It seems pretty easy to use some color as background of div or paragraph, but what if we want to move a step further and try to add some image as background of an element? Is it possible? Answer is -- definitely it is. In any element you just need to add image url in the background property of the element and then, instead of some color, now image will be rendered as the background for that particular HTML element.

To see the practical implmentation, look at the example below:

Example

<head>
<style>
div{
  width:200px;
  height:200px;
  background:url('someImage.png');
}
</style>
</head>

<body> 
  <div>This is a div.</div>
</body> 
Further Reading

1. Background in CSS

2. Color in CSS

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.