<< Previous Next >>

CSS Background

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

background-color

ఒక వెబ్ పేజ్ మరియు అందులోని అన్ని మూలకాల అనగా పారగ్రాఫ్ , హెడ్డింగ్ లే కాకుండా అన్ని tag ల యొక్క background కలర్ ని ఈ property ద్వారా మార్చవచ్చు.
క్రింది ఉదాహరణను పరిశీలించండి.

వెబ్ పేజ్ లో ఈ విధంగా రాసిఉంటుంది.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h2{background-color: #6699FF;}
h3{background-color: #CCFFCC;}
p{background-color: #CC6699;}
</style>
</head>
<body>
<h2>your heading 1</h2>
<h3>your heading 2</h3>
<p>CSS is used to control the style of a web document in a simple and easy way. CSS stands for Cascading Style Sheet</p>
</body>
</html>
బయటికి మాత్రం ఇలా కనబడుతుంది.

your heading 1

your heading 2

CSS is used to control the style of a web document in a simple and easy way. CSS stands for Cascading Style Sheet


background-image

background-image అనే property ద్వారా మనం ఒక ఇమేజ్ ని selector కు background గా వెబ్ పేజ్ పై డిస్ప్లే చెయ్యవచ్చు. క్రింది ఉదాహరణలో "body" అనేది "selector" అవుతుంది. వాస్తవానికి క్రింది విధంగా declar చేసినప్పుడు image అనేది body (అనగా వెబ్ పేజ్) పై రిపీట్ అవుతుంది. అందువల్ల క్రింది ఉదాహరణలో మీకు పేజ్ నిండా స్టార్స్ కనబడుతున్నాయి. కానీ అది ఒకే స్టార్ వెబ్ పేజ్ పై రిపీట్ అవడంవల్ల మనకు మొత్తం పేజ్ అంతా స్టార్స్ కనబడుతున్నాయి.

Sample webpage
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{background-image: url("flower.gif") ;}
</style>
</head>
<body>
<p>"Experience is simply the name
we give our mistakes"</p>
</body>
</html>
బయటికి మాత్రం ఇలా కనబడుతుంది.
"Experience is simply the name
we give our mistakes"


background-repeat

background-repeat అనే property ద్వారా మనం ఇమేజ్ ని వెబ్ పేజ్ పై రిపీట్ కాకుండా డిస్ప్లే చెయ్యవచ్చు. ఒకవేళ డిస్ప్లే అవుతే గనక అది x - direction అనగా ఎడమనుండి కుడివైపుకి లేదా y - direction అనగా పై నుండి క్రిందకు మాత్రమే డిస్ప్లే అయ్యేవిధంగా చేయవచ్చు. క్రింది ఉదాహరణను ట్రై చెయ్యండి.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{background-image: url("flower.gif") ;
background-repeat: repeat-x;}
</style>
</head>
<body>
<p>background property "repeat-x"
means declared background image repeated
horizontally (from left to right)</p>
</body>
</html>
background property "repeat-x"
means declared background image repeated
horizontally (from left to right)

click చేసి చూడుము.

background - repeat యొక్క విలువ "no-repeat" అని రాస్తే దాని ఫలితం ఎలా ఉంటుంది అనేది క్రింది పటంలోచూడండి.
see the result when background-repeat
property value is "no-repeat"

background-attachment

background - attachment అనేది scroll ,fixed ,local ,initial మరియు inherit అనే values ని కలిగి ఉంటుంది.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{background-image: url("flower.gif") ;
background-repeat: no-repeat;
background-attachment: scroll;}
</style>
</head>
<body>
<p>first we declared background image
as "no-repeat" then we wrote background
attachment property value is "scroll".
You just scroll the bar down and see
the image. </p>
</body>
</html>

click చేసి చూడుము.

background-position

Webpage పై background లో images ని display చేసేటప్పుడు అవి మన content కు అభ్యంతరకరంగా ఉండకుండా చూసుకోవడం మంచిది.

Add
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
background-image: url("fruits.jpg");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<p>The background image should be
positioned properly because it
disturbing the reader !</p>
</body>
</html>
బయటికి మాత్రం ఇలా కనబడుతుంది.

The background image should be
positioned properly because it
disturbing the reader !


తదుపరి CSS Links Property గురించి...

<< Previous Next >>
Back to Top