CSS 3 Tutorial Banner Image

CSS associating methods, Setting Background Color, Image and Image Properties With CSS

Views: 490

CSS associating methods, Setting Background Color, Image and Image Properties With CSS

In previous tutorial we learned some basics about what is it, how it originated, and what is CSS used for. In this tutorial we will learn CSS style association in html,  setting different background colors, background position properties, background repeat using CSS. First of all let us learn the 4 ways to associate CSS in our html.

 

CSS associating methods

Associating Styles With Embedded CSS:

In embedded CSS the styles are written within the html opening and closing style clause i.e. <style type=”text/css” media=” optional/value/for/media/type “> /*Your Css Style Codes*/ </style> tags. Note: Media is optional value. Not compulsory.

Associating Styles With CSS Style Sheets:

CSS style sheets are documents with .css extension, they are used to write and manage CSS styles of an html document. CSS style sheets are always preferred among other ways of adding css to your html because CSS style sheets can be reused and makes your website much lighter, they are external documents hence they never make your html look ugly. Stylesheets are added between the opening and closing of head clause. i.e. <link type=”text/css” href=”your/style/sheet/location” media=”optional/value/for/media/type” />.

Associating Styles With Inline CSS:

Inline CSS is a very handy thing, with inline CSS one can add CSS code to individual elements, we always do not want or need changes to the original CSS script, so inline CSS is used to apply rules on certain elements, for example. Whenever we add animations effects and functions using javascript or jquery the style rules are applied to that element using inline CSS by default, inline CSS is applied by appending the element with style property and adding the styles within it. i.e. <h1 style =”color:#BBB;”> Hey this is my css element </h1>

Associating CSS Styles With Import:

CSS style sheets can be imported simply by adding an import rule between opening and closing of head. i.e @import “your/css/url/file.css”;

CSS Association Priority

Top Priority: Inline CSS holds the largest priority. Rules mentioned in inline CSS will override any other CSS rules.

Second Priority: Embedded CSS holds the second priority, any rules in external CSS can be overridden by embedded CSS rules.

Last Priority: External style sheets and import style sheets holds the last priority of all. The rules in external CSS will only be applied if above two don’t override them.

 

Background Color, Image and Image Properties

CSS can let you create and apply background rules to your elements, this makes handy to give your html an elegant look. Let us start learning about CSS background color, how to set background images with CSS and setting the CSS properties for background images.

 

Background Color With CSS

With CSS you can apply backgrounds to your elements. The background-color property is used to define background color of any selected element.

Usage: Suppose we want to apply the background color to h1 elements of our document. Then we will apply the following rule.

h1{

background-color:#FCC;

}

Description: The above CSS rule defines background color #FCC to all h1 elements. For inline it will be.

<h1 style=” background-color:#FCC;”>Your Text Here</h1>

Example:

HTML Element:

<h1 id=”my-h1″>
This is my h1 text with background color
</h1>

CSS Style rule:

#my-h1{
background:#006;
}

Output:

Background-color-property-output

Background image with CSS:

You can set any background image you want for an element, the background-image property sets background image for your selected element. For instance if you want to set a background for div element with id my-div you can use the following rule.

#my-div

{

background-image:url(‘your/image/url/imagename.extension’);

}

HTML:

<div class=”test-background-image”>
<h1>Here is my background image</h1>
</div>

CSS:

.test-background-image
{
width:400px;
height:100px;
background-image:url(“image.jpg”);
}

Output:

Background image with css output

Note: All files and images used in this tutorial is attached at the end.

Background Repeat Property:

Background repeat property is used to apply image repeat rules, by default the value is repeat.

Usage:

background-repeat: value;

Values:

  • repeat: This sets background to repeat in both x and y axis. This is default value.
  • no-repeat: This sets background not to repeat in any axis.
  • repeat-x: This sets the background to repeat in x axis;
  • repeat-y: This sets the background to repeat in y axis;
  • inherit: This sets the background to inherit the property of parent element.
  • initial: This sets the background to initial value ( Default value)

Positioning Background Images with CSS:

The background-position property sets the position for background of any element. You can set your background image’s position using following rule.

background-position: value;

The values for background position property can be the following:

  • left top: background-position:left top; Note: This sets background image to top left of element.
  • left center: background-position:left center; Note: This sets the background image to left center of element.
  • left bottom: background-position:left bottom; Note: This sets the background image to bottom left of element.
  • right top: background-position:right top; Note: This sets the background image to top right of element.
  • right center: background-position:right center; Note: This sets the background image to center right of element.
  • right bottom: background-position:right bottom; Note: This sets the background image to bottom right of element.
  • center top: background-position:center top;Note: This sets the background image to top center of element.
  • center center: background-position:center center; Note: This sets the background image to center of element.
  • center bottom: background-position:center bottom; Note: This sets the background image to position at center bottom of the element.
  • xpos ypos: background-position:50px 50px; Note: This sets the background property by x and y pixel position, other units can also be used like percent, point etc.
  • inherit: background-position:inherit; Note: The background property inherits parent element if this is selected.
  • initial: background-position:initial; Note: The background position is set to initial value if this property is selected.

HTML:

<div class=”test-background-position”>
</div>

CSS:

.test-background-position
{
width:400px;
height:400px;
border:1px solid;
background-image:url(“image2.png”);
background-repeat:no-repeat;
background-position:center center;

}

Output:

baackground position css output

Download sample files:

sample-css-tutorial-background-property

I am ending this tutorial here, in next tutorial we will learn about background attachment and shorthand property. If you have any suggestions please let me know. Contact for any help.

Comments: 1

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