Skip to main content

CSS Background

CSS background properties are used to define the background effects of an element.
CSS properties used for background effects:
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Background Color

The background-color property specifies the background color of an element.
The background color of a page is defined in the body selector:

Example

body {background-color:#b0c4de;}

Try it yourself »
With CSS, a color is most often specified by:
  • a HEX value - like "#ff0000"
  • an RGB value - like "rgb(255,0,0)"
  • a color name - like "red"
Look at CSS Color Values for a complete list of possible color values.
In the example below, the h1, p, and div elements have different background colors:

Example

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

Try it yourself »

Background Image

The background-image property specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element.
The background image for a page can be set like this:

Example

body {background-image:url('paper.gif');}

Try it yourself »
Below is an example of a bad combination of text and background image. The text is almost not readable:

Example

body {background-image:url('bgdesert.jpg');}

Try it yourself »

Background Image - Repeat Horizontally or Vertically

By default, the background-image property repeats an image both horizontally and vertically.
Some images should be repeated only horizontally or vertically, or they will look strange, like this: 

Example

body
{
background-image:url('gradient2.png');
}

Try it yourself »
If the image is repeated only horizontally (repeat-x), the background will look better:

Example

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

Try it yourself »

Background Image - Set position and no-repeat

Remark When using a background image, use an image that does not disturb the text.
Showing the image only once is specified by the background-repeat property:

Example

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

Try it yourself »
In the example above, the background image is shown in the same place as the text. We want to change the position of the image, so that it does not disturb the text too much.
The position of the image is specified by the background-position property:

Example

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

Try it yourself »

Background - Shorthand property

As you can see from the examples above, there are many properties to consider when dealing with backgrounds.
To shorten the code, it is also possible to specify all the properties in one single property. This is called a shorthand property.
The shorthand property for background is simply "background":

Example

body {background:#ffffff url('img_tree.png') no-repeat right top;}

Comments

Post a Comment

Popular posts from this blog

Toshiba Canada enters all-in-one PC market

Toshiba of Canada has thrown its hat into the all-in-one personal computer (PC) ring with the launch this week of the Toshiba DX730, a 23” all-in-one machine designed for users who want a large display and multimedia features in an environment where space is at a premium. It's Toshiba's first foray into this form factor, said Mini Saluja, national training manager with Toshiba of Canada, building on its experience in the laptop market. The DX730 has a 23” full HD multitouch display with a glossy black finish on an aluminum stand. It comes with a matching Bluetooth keyboard and mouse, and boasts Onkyo stereo speakers with Waves MaxxAudio sound processing. Two models of the DX730 will initially be available. The $899 model features a second-generation Intel Core i3 processor with 4GB of DDR3 memory, a 1TB 7200 RPM hard drive, a DVD SuperMulti Drive and HDMI in. For $1,049, you can move up to a model with an NVIDIA Geforce GT 540M processor and Intel Core i5, as we...
1 comment
Read more

Xiaomi Mi 11 Ultra review

  Introduction Now that the Pro moniker has gone mainstream, it's Ultra that has come to represent the cream of the crop, and the Xiaomi Mi 11 Ultra can wear that badge proudly. Limited to its home market last year, the ultimate Mi has gone global this time around, and we're happy to have it for review today. We're torn whether it's the camera system's physical appearance that is more striking or the hardware inside. A simply massive raised area on the back looks bolted on, almost after the fact, it's hard to miss, and it's a great conversation starter even if it's not everyone's cup of tea. But its size is warranted - the main camera packs the largest sensor used on a modern-day smartphone, and next to it - two more modules unmatched in their own fields, in one way or another. Oh, and yes, there's also a display here - because why not, but also because it can be useful. There's a lot more than 1.1 inches of ...
Post a Comment
Read more

JavaScript Where To

JavaScript in <body> The example below writes the current date into an existing <p> element when the page loads: Example <html> <body><h1>My First Web Page</h1> <p id="demo"></p> <script type="text/javascript"> document.getElementById("demo").innerHTML=Date(); </script> </body> </html>
Post a Comment
Read more