box background

Box Background

When you choose to use a background image for the box it is always a good idea to specify a background color as well. The reason is that until the background image is loaded, the background color will be shown.

If there is too much difference between the background color and the background image, it will look disturbing once the browser shifts from the background color to the image.

Therefore it is a good idea to specify a background color that matches the colors of the image as close as possible.

background properties are used to define the background effects of an element.

properties used for background effects:

background-color,
background-image,
background-repeat,
background-attachment,
background-position

background-repeat.

repeat
The image is repeated both horizontally and vertically.
repeat-x
The image is repeated horizontally only.
repeat-y
The image is repeated vertically only.
no-repeat
The image is not repeated: only one copy of the image is drawn.

EXAMPLE

<div style="border: 5px solid #B8860B; padding: 10px; background-color: rgb(240, 248, 255); background-image: url(Bg-image URL); background-repeat: repeat-y; background-position: left;" > The image is repeated vertically only </div>

background-position

left, center, right, | top center | left bottom | top right etc.

background-attachment

Value - scroll | fixed

NOTE:Even if the image is fixed, it is still only visible when it is in the content, padding or border area of the element. Thus, unless the image is tiled ('background-repeat: repeat'), it may be invisible.

'fixed' background is fixed with respect to the page box and is therefore replicated on every page.

<div style="border: 5px solid #B8860B; padding: 10px; background-color: rgb(240, 248, 255); background-image: url(Bg URL); background-repeat: no-repeat; background-attachment: fixed; background-position: center;" > This is how it workks </div>

Third Trick

Lets make a Multiple BG

Not only a borders. We can also layer the Background.

Have you seen the Heart in the right bottom of the box? that is the second Bg.

code:

<div style="border: 5px solid #B8860B; padding: 10px; background-color: rgb(240, 248, 255); width: 280px; height: 280px; background-image: url(YOUR second Bg URL witch is the heart i used), url(YOUR MAIN Bg URL); background-position: right bottom; background-repeat: no-repeat;"> </div>

Opacity

The problem with using opacity in CSS is that not only the background of the element will have transparency, but all of its child elements as well. This means that any text within will have the same opacity,

See??

code:

<div style="border: 5px solid #B8860B; padding: 10px; filter: alpha(opacity=65); opacity:0.65; background-color: rgb(240, 248, 255); background-image: url(YOUR Bg URL ); background-repeat: no-repeat;"> Your about me goes here </div>

The Solution!

Therefore, I can happily offer an alternative for you: RGBa colors. The beauty in this is that you declare the normal RGB values + values for the level of transparency you want, resulting in a very easy way to declare transparency for a color. Making this happen with CSS,

Since The transparency will only be appreciate to the background, i put another Box just to see how it looks..

These allow us to use opacity within our background via an alpha channel. If we are looking to use a 30% opaque we can use rgba(102, 102, 255, 0.3)

code:

<div style="border: 5px Dotted #B8860B; padding: 10px; background: rgba(102, 102, 255, 0.6);"> Your about me goes here </div>