Skip to main content

CSS - CSS Backgrounds kese set kre, image kese lagaye

Websites के categories के अनुसार उसका background भी बदलना जरुरी होता है | आपने देखा होगा कि कई websites का backgrounds; अलग-अलग colors में होता है या कुछ websites के backgrounds पर images होते है |
HTML का default background color ये white होता है, लेकिन अगर कुछ लोग चाहते है तो इस background color को बदल भी सकते है |
Background Related CSS Properties
  • background
  • background-color
  • background-image
  • background-attachment
  • background-repeat
  • background-position

background property(All in One)

Syntax :
background : color_name;
background : url("image_path");
background : url("image_path") background_repeat;
background : url("image_path") background_repeat/position/attachment;

background : color_name;

निचे div1, div2 और div3 को एक ही color को अलग-अलग प्रकार से दिया गया है | निचे color को अलग-अलग प्रकार से दी जाने वाली values को दिया गया है |
Type of ValueDescription
color_nameयहाँ पर color का नाम दिया जाता है | For Example, background : red
hexadecimal color codeयहाँ पर hex code color भी दिया जाता है | For Example, background : #F00
rgb color codeयहाँ पर rgb(red,green,blue) color code भी दिया जाता है | background : rgb(255, 0, 0)
hsl color codeयहाँ पर hsl(hue,saturation,luminance) color code भी दिया जाता है | background : hsl(360, 100%, 50%)

.div1{
 background : #F00; /* hexadecimal color code */
}
.div2{
 background : red; /* color name */
}
.div3{
 background : rgb(255, 0, 0); /* rgb color code */
}
.div4{
 background : hsl(360, 100%, 50%); /* hsl color code */
}
Output :

background : url("image_path");

Exmaple में myDiv selector पर image background दी गयी है |
.myDiv{
 background : url("nature.jpg");
}

background : url("image_path") background_repeat;

Example में myDiv selector पर background image के साथ उसे repeat नहीं किया गया है | अगर height, width और repeat नहीं दिया जाता है तो by default image को repeat किया जाता है |
Example 1 :
.myDiv{
 background : url("nature.jpg") no-repeat;
}

Example 2 :
Example में myDiv selector पर image को horizontally(repeat-x) repeat किया गया है |
.myDiv{
 background : url("nature.jpg") repeat-x;
}

Example 3 :
Example में myDiv selector पर image को vertically(repeat-y) repeat किया गया है |
.myDiv{
 background : url("nature.jpg") repeat-y;
}

background : url("image_path") background_repeat/position/attachment;

Example 1 :
Example पर image background attachment को fixed किया गया है |
.myDiv{
 background : url("nature.jpg") no-repeat fixed;
}

Example 2 :
Example पर image background position को right top पर दिया गया है |
.myDiv{
 background : url("nature.jpg") no-repeat right top;
}


Background PropertyDescription
background-colorElement पर background color दिया जाता है |
background-imageElement पर background image दी जाती है |
background-attachmentWebpage पर background attachment को fixed या scroll set किया जाता है |
background-repeatbackground को किस तरह repeat होना चाहिए या repeat नहीं होना चाहिए ये set किया जाता है |
background-positionbackground की position set की जाती है |
Labels:

Comments

Post a Comment

Popular posts from this blog

CSS - CSS Fonts in hindi, css font kya h,css font use kese kre,hindi me Technamdev.blogspot.com

CSS Fonts Properties से text/content के font को set किया जाता | इन properties में content को bold, italic, font size और अन्य प्रकार से styling की जाती है | CSS Font Generic Name and Font Family Name Font Generic Name Font Families का group होता है | जैसे कि, Sans-serif(generic) है और उसके अंतर्गत Arial, Arial Black, Agency FB, BankGothic, Calibri और आदि कई Fonts होते है | Font Family Name ये simple fonts name होते है | जैसे कि Arial, Arial Black, Agency FB, BankGothic, Calibri, और आदि कई | Agency FB Antiqua Architect Arial bankFuturistic BankGothic Blackletter Blagovest Calibri Comic Sans MS Courier Cursive Decorative Fantasy Fraktur Frosty Garamond Georgia Helvetica Impact Minion Modern Monospace Open Sans Palatino Roman Sans-serif Serif Script Swiss Times Times New Roman Verdana Most used Web Safe Font...
1 comment
Read more

Create a Responsive Login Form in HTML and CSS in Hindi

Create a Responsive Login Form in HTML and CSS in Hindi                                                              Login Form in HTML and CSS In this video, we will we see How to Create a Responsive Login Form in HTML and CSS in Hindi step by step. As you can see I try to make a Login form that should be different from others available online on any social media. Believe me, you gonna learn many new technique and tips on how to make a Responsive Login Form in HTML and CSS in Hindi. Let's talk about the background of the Login form in Hindi first. You can see It's a diagonal background and I know must of are thinking how we can create a diagonal webpage. Believe me, I wrote only one line of code to get the diagonal background on my Login Form in Hindi. background-image: linear-gradient(to top right,...
Post a Comment
Read more
HTML Tag क्या होता है – What is HTML Tag and Types of HTML tags in Hindi HTML tag क्या होता है – What is HTML Tag जब भी हम कोई भी webpage डिजाईन करते हैं तो हम उस webpage को डिजाईन करने के लिए कुछ command का उपयोग करते हैं उसको HTML tag कहा जाता है| Tag हमेशा angle bracket के अन्दर लिखा जाता है जैसे  <tag>..</tag>. HTML Tag  बहुत सारे character का set होता है जो की HTML language में commands का काम करता है जिसके द्वारा हम अपने webpage को डिजाईन करते हैं| HTML टैग webpage में hidden keyword होता है जो की हमारे वेब ब्राउज़र को यह बताता है की इस webpage को किस प्रकार formatting करना है| Tags लिखने के रूल: जिस प्रकार programming language में कोई भी function लिखने का रूल होता है उसी प्रकार tags लिखने के भी कुछ रूल होते हैं| तो चलिए देखते हैं की कौन कौन से रूल होते हैं: Tags angle bracket  (<>)  के अन्दर लिखा होना चाहिए| जैसे की <html>. यदि आप tags को angle bracket के अन्दर नहीं लिखेंगे तो वेब ब्राउज़र उसे सिंपल text समझ लेगा और उसे tex...
1 comment
Read more