7/23/2019 CSS Background

http://slidepdf.com/reader/full/css-background 1/12

CSS Background

The background of your website is very important, so please spend some time with this tutorial.

If you are aiming for a professional website, a good rule of thumb is to use a light backgroundwith dark text. However, if you're just making a website for pleasure, then any kind of color

combination is acceptable.

Advertise on Tizag.com 

ith !"", you are able to set the background color or image of any !"" element. In addition,you have control over how the background image is displayed. #ou may choose to have it repeat

hori$ontally, vertically, or in neither direction. #ou may also choose to have the background

remain in a fixed position, or have it scroll as it does normally. The following examples willshow you how to implement all of these options.

CSS Background Color

%s you have seen throughout Ti$ag Tutorials, many different background colors are present.

These varying backgrounds were obtained without using tables& elow are a couple examples of !"" backgrounds.

CSS Code:

h4 { background-color: white; }

p { background-color: #1078E1; }ul { background-color: rgb( 14! "0! 14$%; }

Display:

This is a <h4 !ith a !hite "ackground

This is a (p) with a background using the hexadecimal value of *+-/+

• This is an unordered list

• with an 01 value of +23, 45, +26

In the above example we used three different formats for defining a color7 a color name,

hexadecimal values, and 01. !heck out the the list of supported color names. Hexadecimalform is a pound sign 8*9 followed by, at most, 5 hex values 8:;9. 01 defines the individual

values for 0ed, 1reen, and lue. /xample form7 rgb80ed, 1reen, lue9< with the range of :466

7/23/2019 CSS Background

http://slidepdf.com/reader/full/css-background 2/12

for each value.

CSS Background #mage

 =eed an image to repeat left:to:right, like the gradient background that appears at the top ofTi$ag.com> ?r maybe you would like to have an image that remains fixed when the user scrolls

down your page. This can be done @uite easily with !"" and more, including7

• choosing if a background will repeat and which directions to repeat in.

•  precision positioning

• scrollingAstatic images

Bet's begin with a default !"" background image.

CSS Code:

p { background-i&age: url('&allic)*pg%; }

h4{ background-i&age: url(http:++www)ti,ag)co&+pic'+c''+'&allic)*pg%; }

Display:

This (p) has a background image using a local path to the picture.

This <h4 has a "ackground image using the complete url path.

Background #mage $epeat

#ou can have a background image repeat vertically 8y:axis9, hori$ontally 8x:axis9, in both

directions, or in neither direction.

CSS Code:

p {

background-i&age: url('&allic)*pg%;

background-repeat: repeat; }

h4 {

background-i&age: url('&allic)*pg%;

  background-repeat: repeat-.;}

ol {

background-i&age: url('&allic)*pg%;

background-repeat: repeat-/;}

7/23/2019 CSS Background

http://slidepdf.com/reader/full/css-background 3/12

ul {

background-i&age: url('&allic)*pg%;

background-repeat: no-repeat;}

Display:

This (p) has a background image repeating in both directions 8default repeat9. If you use thisoption, make sure that your image was designed to be repeated.

This <h4 has a "ackground image repeating vertically %y&. 'ou could this to add a style to

the side o( your element.

+. This is an ordered list

4. ith a background that repeats

C. Hori$ontally 8x9

• This is an unordered list

• ith a background that repeats

• in neither direction.

CSS )i*ed Background #mage

#ou may choose to have your background scroll naturally, or to have it in a fixed position. =ote7This feature does not work properly in most browsers when placed within a textarea, except

Internet /xplorer 5., which displays it correctly.

CSS Code:

te/tarea)nocroll {

background-i&age: url('&allic)*pg%;

background-attach&ent: i/ed;

}

te/tarea {

background-i&age: url('&allic)*pg%;

background-attach&ent: 'croll;}

Display:

7/23/2019 CSS Background

http://slidepdf.com/reader/full/css-background 4/12

CSS Background #mage +ositioning

If you would like to define where exactly an image appears within an HTDB element, you may

use !""'s background:position. Elease take note that there are three different ways of defining position7 length, percentages, and keywords. e recommending using lengths :: specifically,

 pixels.

CSS Code:

p {

background-i&age: url('&allic)*pg%;

background-po'ition: "0p/ 10p/;

}

h4 {

background-i&age: url('&allic)*pg%;

background-po'ition: 203 203;

}

ol {

background-i&age: url('&allic)*pg%;

background-po'ition: top center;

}

Display:This (p) has a background image positioned with pixel values.

This <h4 has a "ackground image positioned !ith percentages.

+. This is an ordered list

4. ith a background that was positioned

C. using keywords.

,ote: hen using pixels, the location of the image will be 8%9px from the left of the screen and

89px from the top of the screen, where % and are integers. ,ote: hen using percentages,

the location of the image will be 8%9F from the left of the screen and 89F from the top of the

screen, where % and are integers. ,ote: %vailable positioning keywords are7 top, right, bottom, left, and center.

This <p> has a background imag

So you can scroll as much as y

This <h4> has a background ima

Experiment w ith fixed and scrol

7/23/2019 CSS Background

http://slidepdf.com/reader/full/css-background 5/12

CSS -radient Background

If you would like to create a gradient background like the one that appears at the top of

Ti$ag.com, you must first create an image inside a painting program 8Ehotoshop, Graw, etc9 likethe one you see below.

,ecessary #mage:

 =otice that the image is very slim. e are going to be tiling the image hori$ontally, so you canmake the image skinny as possible. %s long as the image is + pixel or wider, you will be fine.

sing the repeat attribute, we set the value to repeat:x which causes the image to span left to

right across the specified element. This example adds a gradient background to the paragraph

element.

CSS Code:

p {

  background-i&age: url(http:++www)e/a&ple)co&+gradient)gi%;  background-repeat: repeat-/;

}

Display:

This paragraph has a gradient background. The gradient background was first made in a painting program and then repeated hori$ontally across the paragraph element. It makes for a

neat effect that also loads @uickly& ecause the image is very skinny, the file si$e is also very

small. #ou could also create a gradient that changes color left to right and repeat it in thevertical direction to have a gradient on the side of your web page.

7/23/2019 CSS Background

http://slidepdf.com/reader/full/css-background 6/12

• 1o ack 

• !ontinue

)ound Something rong in this /esson0

0eport a ug or !omment on This Besson : #our input is what keeps Ti$ag improving withtime&

Try it out1

e" $e(erence

HTDB 0eference !"" 0eference !"" /xamples EHE /xamples 

2elp Tizag -ro!

Bink to Ti$ag 

 =ew : Ti$ag.com ;orums& 

0ecent ;orum Topics7: ?verflow 

: "B JoinAnion 

: hat is client:side scripting and server:side scripting> : EHE K HTDB Input 

<html>

<head><style>

body { background-color black! "

p { background-color gray! "

h# { background-color red! "

ul { background-image url$pics%cssT%small&ic'(pg)!

  background-repeat repeat-y!

  color green!

 "

<%style>

<%head>

<body>

<h#>*SS +ackgrounds<%h#>

<p>This page has a black background' ,f you make a black

you change the font color from its default black alue' .n th

 (ust change the backgrounds of the /T01 elements2 as w e

<ul>

7/23/2019 CSS Background

http://slidepdf.com/reader/full/css-background 7/12

Advertise 2ere

3ore Tutorials1

Dicrosoft ?ffice Tutorials %rtist Tutorials 

4C:4 /rack =etwork L !opyright L Erivacy Eolicy L %dvertising Informatio

CSS Font

!"" gives you great control over the way your text is displayed. #ou can change the text si$e,

color, style, and more. #ou probably already knew how to make text bold or underlined, but did

you know you could resi$e your font using percentages> Bet us begin the lesson with an easy

and important font attribute, color&

Advertise on Tizag.com 

CSS Font Color

%lthough the color of the text seems like it would be part of !"" ;ont, it actually is a

standalone attribute in !"". This could be for many reasons, including the fact that it will be

used a great deal, so why make the coder type out Mfont:colorM, when they could just type out

McolorM instead> Here's an example of changing the color of your font.

CSS Code:

h4 { color: red; }

h$ { color: #0001; }

h { color: rgb(0! ""0! 8%; }

Display:

 This is a red h4 header.

 This is a hexadecimal #9000A1 h5 header.

7/23/2019 CSS Background

http://slidepdf.com/reader/full/css-background 8/12

This is an rgb(0, 220, 98) h6 header.

In the above example we used three different formats for defining a color7 a color name,

hexadecimal values, and 01. !heck out the list of supported color names. Hexadecimal form

is a pound sign 8*9 followed by at most 5 hex values 8:;9. 01 defines the individual values

for 0ed, 1reen, and lue.

/xample form7 rgb80ed, 1reen, lue9< with the range of :466 for each value.

CSS Font Family

;ont families can be divided into two groups7 serif and sans:serif. % sans:serif font does not

include the small lines at the end of characters, while a serif font does include these small lines.

hen choosing which kind you prefer, remember that studies have shown that sans:serif fonts

are much easier to read on a computer monitor than serif fonts.

CSS Code:

h4 { ont-a&il.: 'an'-'eri; }

h$ { ont-a&il.: 'eri; }

h { ont-a&il.: arial; }

Display:

 This is a header ith sans!seri" "ont

 This is a header ith a seri" "ont

This is a header with an arial font 

%s you probably noticed throughout Ti$ag.com, we do not use serif fonts, except in special

cases, like for the titles of the !ode and Gisplay boxes.

CSS Font Sie

#ou can manipulate the si$e of your fonts by using values, percentages, or key terms. sing

values are useful if you do not want the user to be able to increase the si$e of the font because

your site will look incorrect if they did so. Eercentages are great when you want to change the

default font, but do not want to set a static value.

CSS Code:

p { ont-'i,e: 1"03; }

ol{ ont-'i,e: 10p/; }

ul{ ont-'i,e: /-large; }

7/23/2019 CSS Background

http://slidepdf.com/reader/full/css-background 9/12

Display:

This is a font si$e of +4F

1.  This is a "ont sie o" 10px

•  This is a "ont sie o" $x!lar%e$

Though key terms are not very useful, the common terms are7 xx:large, x:large, large, medium,

small, x:small, and xx:small.

CSS Font Style

!"" ;ont:"tyle is where you define if your font will be italic or not. Eossible key terms are the

following7 italic, obli@ue, and normal.

CSS Code:

p { ont-'t.le: italic; }

h4{ ont-'t.le: obli5ue; }

Display:

This is an italic font

 This is an o&li'(e "ont

CSS Font )ei%ht

If you want to control the weight of your font 8its thickness9, using font weight is the best way

to go about it. e suggest that you only use font:weight in multiples of + 8e.g. 4, C, etc9

 because any less and you probably will not see any difference. The values range from +

8thin9:3 8thick9.

CSS Code:

p { ont-weight: 100; }

ul{ ont-weight: bolder; }

Display:

This is a font with a weight of 100 

•  This is a "ont ith

• a $&older$ ei%ht

7/23/2019 CSS Background

http://slidepdf.com/reader/full/css-background 10/12

%vailable key terms for font:weight7 bold, bolder, and normal.

CSS Font *ariant

!"" ;ont Nariant allows you to convert your font to all small caps. =ote7 not every font

supports !"" ;ont Nariant, so be sure to test before you publish.

CSS Code:

p { ont-6ariant: '&all-cap'; }

Display:

This text was written normally and converted to small:caps

• +o ,ac-

• Contin(e

Fo(nd Somethin% )ron% in this esson/

0eport a ug or !omment on This Besson : #our input is what keeps Ti$ag improving with

time&

 Try it o(t

7/23/2019 CSS Background

http://slidepdf.com/reader/full/css-background 11/12

Web Reference

T2 3e"erence CSS 3e"erence CSS xamples  xamples 

Help Tizag Grow

in- to Tia% 

6e ! Tia%.com For(ms 

3ecent For(m Topics:

! 78ero 

! S ;oin<=nion 

! )hat is client!side scriptin% and ser8er!side scriptin%/ 

! > T2 ?np(t 

Advertise Here

More Ttorials!

2icroso"t 7@ce T(torials Artist T(torials 

<html>

<head>

<style>

body { font-family serif! "

p { font-si3e 5px! "

h# { font-si3e #4px!

font-style italic!

"

ul { font-w eight bolder! "

<%style>

<%head>

<body>

<h#>*SS 6onts<%h#>

<p>This paragraph has a static si3e of 5pixels' ,f you try a

your font w ith your browsers 7,ncrease 6ont Si3e72 it w ill no

good when you need a specific si3e for your w ebsite to loo

<ul>

<li>This list has a <%li>

7/23/2019 CSS Background

http://slidepdf.com/reader/full/css-background 12/12