All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

HTML Background Image No-Repeat

Last Updated : Mar 11, 2024

HTML Background Image No-Repeat

In this tutorial we will show you the solution of HTML background image no-repeat, in HTML sometimes we want to set image as background.

But due to some reason we are unable to set image as background accurately. We have to face many problems that time. One of the problem is repeating of image again and again. So, today we are here to show you that how to set background image in html with no-repeat.

Step By Step Guide On HTML Background Image No-Repeat :-

Now, as there are many ways to set an image as background. But we will teach you the one in which the image should no-repeat and it covers full screen.

This can be done with or without CSS. The below example will show you that how you able to set background image in html with no-repeat.

In this case, we done it by with CSS, if you want to see how to do the same task without CSS, then there is already an article published on this. You can go through the article if you have any issue

<!DOCTYPE html>
      <html>
        <head>
          <title> Title of the document<title>
<style>
        body{
            background-image: url(demo10/logo.jpg);
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
        }
    </style>
 </head>
   <body>
   </body>
      </html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively. Here, we use style tag in body, which is discussed in next point.
  4. Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. Here in the code, we use body tag. That is fully empty. So, question is that how we add image.
  5. Here, we first give a class to body. After that the class is used to give CSS to body, the CSS used here is internal CSS. In the CSS used here, we set an image as value to its attribute has name background-image.
  6. So, an image is placed on webpage. Now, our task is to give dimensions. So, we specify dimensions to 100% as width and 100% as height. Now, the last property used here is to set value of no-repeat to its attribute background-repeat.
  7. With this last attribute, the image that is repeating again and again to cover full webpage stops. If you want the image to cover full page, then you can use background-size attribute and its value must be cover.
  8. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

In conclusion, here we learn about new topic that how to set image as background in a webpage with no-repeat. In next session, we will provide you solutions of topics regarding images. I hope this tutorial on HTML background image no-repeat helps you.

Author Image About Pragati

Experienced coding content writer who enjoys breaking down complex concepts in programming languages like Java, Python, C, and C++. Over three years of experience producing interesting and relevant content for a variety of entities. Committed to providing concise and easy-to-understand articles that assist readers in easily understanding technology and industry trends in the world of coding and software development.

Follow Pragati On Linkedin 🡪