How to Add a Background Image in Blog/Website Homepage, Posts?

How to Add a Background Image in Blog/Website Homepage, Posts?



    Adding or changing blog's styling is difficult for newbies because it may break the blog or site layout if you missed a semicolon or commas. Every blogger should know basic coding so that you should not be dependent on web designers for some basic work and loose your hard earned money.

    So today we will teach you how you can change the background image of your blog easily just by adding few lines of code. We know we prefer to change our background image on occasions or events that takes place occasionally.

    So changing the background images or color make the blog or site more pleasing and appealing to the audience.

    If you have good content but not a appealing site the audience will get bored reading your content so if you have both good content and well designed site then it is like complete treat to your audience.

    In order to understand this background-image property please you should know basics of CSS (Cascading Style Sheets). You can learn it by yourself in W3 Schools.

    Introduction To HTML Tree:

    First Understand the basic html Tree 

    <html>

              <head>
                        <title>Blog Title</title>
              </head>

              <body>
                         <header></header>
                         <article></article>
                          <footer></footer>
              </body>

    </html>

    See this is the basic html markup structure of every blog/website 

    <head></head>
                              Head element contains all the meta information about the site or blog like title of the page, description, charset, language, location etc This things are not visible to the users except the title this things are used to inform the search engines.

    <body></body>
                             body element contains all the visible information like links, images, videos, sections like <header>, <aside>,  <footer> etc 
                                          This means when you add background image to body then the whole website will get the background because everything that users see will be inside the body hope I have explained you this.

    Adding the Background-image in Static Websites or blogs:

    body {
        background-image: url("Image link here");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }

    If You want to add a color if your image fails to load then add this code instead of background-image


     background: #000 url("Image link here");

    Explanation of the code line by line:

    background-image: 
                                       This property sets one or more background images for an element. You can also use linear gradient as the background image.     

    background-position:
                                      Background-position property sets the position of the image horizontally and vertically. By Default it will be placed at left top corner of the element. So we have add the center value.

    You can also use pixels, percentage to adjust the position.

    background-size:
                              Background-size property specifies the size of the background image the cover we used will stretch the image and covers the container, you can use pixels, percentage, contain and auto as the options.

    background-repeat:
                                  This property will set the repetition of the background image whether to repeat or no-repeat or to repeat-x |(horizontally) or to repeat-y (vertically)

    use repeat instead of no-repeat if your image is smaller.

    background-attachment:
                                      This property sets whether the background image to scroll when users scrolls up or down the mouse with the page or to be in fixed position .

    If you don't set the property to fixed then by default it will use scroll.

    Adding the Background-image only for posts  :



    body .post {
        background-image: url("Image link here");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }

    Adding The Background for a particular section


    body your_id_or_class {
        background-image: url("Image link here");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }

    See adding a background to any section is easy all you need to do is to find the id or class for that section. If your template is using html5 elements then use footer, header, aside for the background after the body.

    Customization:

    Orange Highlighted Text is responsible for the class or id of the div where you want to add background image. if you are using html5 elements then use the name like header for header section, aside for sidebar, footer for footer etc 

    Use # prefix for ID and . for class 

    Conclusion:

    Hope you all learn how to add background image to the blog or website. This things are easy but confusing in starting so practice it and learn more from w3schools.



    That's It Thanks For Following our Tutorial '' How to Add a Background Image in Blog/Website Homepage, Posts? '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.

    No comments:

    Post a Comment