আগামী ২৩ অক্টোবর -২০১৭ তারিখ থেকে শুরু হচ্ছে পাঁচ মাস ব্যাপী Professional Web Design and Development with HTML,CSS,Bootstrap,PHP,MySQl, AJAX and JQUERY কোর্সের ৮৬ তম ব্যাচ। আগ্রহীদেরকে অতিসত্বর মাসুদ আলম স্যার এর সাথে যোগাযোগ করতে অনুরোধ করা যাচ্ছে। স্যার এর মোবাইল: 01722817591, Email : [email protected] কোর্সের সিলেবাস এর জন্য এখানে ক্লিক করুন ।

CSS Basic Part-2

CSS basic 2 with CSS Background Properly

What we going to learn in this tutorial

Today we are going to cover CSS property from this tutorial. In this tutorial you are going to discuss CSS background property in details.

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

Background Color

Background color is very crucial property of CSS. This is one of the vastly used properties in CSS.

—What type of color CSS color supports

  • a HEX value – like “#ff0000”
  • an RGB value – like “rgb(255,0,0)”
  • a color name – like “red”

Example

CSS

h1  {

background-color:#cccccc;

}

p    {

background-color:#e0ffff;

}

div  {

background-color:#b0c4de;

}

HTML

</pre>
<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.

This paragraph has its own background color.

We are still in the div element.</div>
<pre>

Background Image

Background image is also one of the popular CSS properties. There is very few website that do not have used CSS background property. 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.

Example

CSS

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

 HTML

Hello World!
This text is not easy to read on this background image.

Visual Example 1

Background Image Repeat

Background repeat property very useful property to handle to dimension of images in website vertically and horizontally. By default, the background-image property repeats an image both horizontally and vertically.

—Background-repeat option

  • repeat-x
  • repeat-y
  • no-repeat
  • inherit

“repeat-x” repeats background images horizontally and “repeat-y” repeats background images horizontally.  “No-repeat” stops images to repeat in both dimensions. “Inherit” Specifies that the setting of the background-repeat property should be inherited from the parent element.

Example

Repeat X CSS

div
 {
 background-image:url('smiley.gif');
 background-repeat:<b>repeat-x</b>;
 }

Repeat Y  CSS

div
 {
 background-image:url('smiley.gif');
 background-repeat:<b>repeat-y</b>;
 }

No Repeat CSS

div
 {
 background-image:url('smiley.gif');
 background-repeat:<b> no-repeat</b>;
 }

Visual Example 2 For Repeat X

Visual Example 3 For Repeat Y

Visual Example 4 For No Repeat

Browser Support

browser

Background Attachment

Background attachment is a wonderful property of CSS it let you to stick background image in fixed position and scroll with when you scroll the pages. The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page. Default value is scroll.

—Background-Attackment option

  • Scroll
  • Fixed

 CSS Example for scroll

{

background-image:url('smiley.gif');

background-repeat:no-repeat;

background-attachment: scroll;

}

CSS Example for Fixed

{

background-image:url('smiley.gif');

background-repeat:no-repeat;

background-attachment: fixed;

}

Visual example 5 for Fixed

Visual example 6 for Scroll

 

Browser Support

browser

Background Position

Background position property is property that sets the position of attached background. Background position is can be declared vertically and horizontally.  Even only vertically or only horizontally. Background position value can be declared in percentage, pixel and words such as left top

Value

  • left center
  • left bottom
  • right top
  • right center
  • right bottom
  • center top
  • center center
  • center bottom

x% y%

Example in pixels

div
 {
 background-image:url('smiley.gif');
 background-repeat:no-repeat;
 background-position:<b>50px 50px</b>;
 }

Example in percentage

div
 {
 background-image:url('smiley.gif');
 background-repeat:no-repeat;
 background-position:<b>50% 50%</b>;
 }

<i> 


Visual example 7 for attachment in pixel

Visual example 8 for attachment in percent

Visual example 9 for attachment in words

 

Browser Support

browser

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 of CSS Shorthand property

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

Visual example for shorthand

 

Leave a Reply

Your email address will not be published. Required fields are marked *