SIDEBAR
»
S
I
D
E
B
A
R
«
Design your webpage’s Background using CSS
by sheri

Design your webpage’s Background using CSS

CSS is basically used to add style to your HTML document. Each part of the HTML document can be made attractive by using CSS. It can be made attractive by changing background color, by adding images in the background, use different font styles for different text, different hover style on text and images and a lot more. But providing background and adding style using CSS on your web page is one of the most important things while designing the web page. We must carefully analyze and choose what we can do with the background of our web page.

CSS background properties add different styles to the background of your web page. Most common CSS properties that can be used to define a style for the background of your web page are as follows:

        • background-color

     

        • background-image

     

        • background-repeat

     

        • background-attachment

     

      • background-position

    Background Color

    The background-color property defines the background color of the web page. You can add any color you want so that your web page looks attractive to your audience. This property is added in the body element of the HTML document.
    body {background-color : #ff0000;}
    The above style of defining the color is by defining the hex value of the color. We can do it by some other ways like,

    • HEX value – like “#ff0000”
    • RGB value – like “rgb(255,255,0)”
    • Color name – like “blue”

    We can also add different background color to a particular paragraph, heading or a div section of an HTML document.
    Example:

        h1 {background-color: #6950ed;}

     

        p {background-color: red;}

     

      div {background-color: rgb(255,0,0);}

    Background Image
    The background-image property defines an image in the background of the web page. It can be set to the web page’s background like this:
    body {background-image:url(‘image.gif’);}
    The url specifies the location of the image on your system.
    Background Image – Repeat Vertically or Horizontally
    The background-image property specified above is repeated in the background by default. But sometimes it looks weird so to make it more attractive you can just repeat horizontally or either vertically or don’t want to repeat at all. You can do it by using the background-repeat property.
    body
    {
    background-image: url(‘image.gif’);
    background-repeat: repeat-x;
    }
    The above example will repeat the image horizontally only. If you want your image to repeat vertically then specify its value – “repeat-y” and if you don’t want it to repeat either way, then you must specify “no-repeat”.
    Background Position
    The background position property lets you to place your background image on your web page. You can do it wherever you like to place it on your web page.
    body
    {
    background-image:url(‘image.gif’);
    background-repeat:no-repeat;
    background-position:right top;
    }
    Background Attachment
    The background-attachment property let you define whether the image should be scrolled along with the page or not. Sometimes we want our image to be fixed throughout the page whether user goes at the bottom of the page or in the middle of the page. By, default it scrolls with the text provided in the document. We can make it fixed by specifying values of background-attachment property as fixed.
    body
    {
    background-image:url(‘image.gif’);
    background-repeat:no-repeat;
    background-position:top left;
    background-attachment:fixed;
    }
    This property is very useful in designing the essential position of the image on the background of the web page behind the document and makes it more effective. The values that can replace fixed or scroll which is by default and inherit; it specifies that the setting of this property should inherit from the parent element only.
    One must carefully choose the best background for the web page to make it attractive. If you have an attractive page by styling it properly then your audience will love to visit it again and again. These properties will help you to make your page attractive. So, you must carefully place and do justice with whatever you are placing onto your web page.


Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
*
SIDEBAR
»
S
I
D
E
B
A
R
«
© Copyright cssblaze.com