How to Apply a Background Image in CSS [2024]

CSS is a strong and essential tool for formatting your website. Learn how to apply a background image in CSS using Basics. Creating a website with appealing nature is a terrific method to express yourself. There are numerous tools available for creating a website. You should also learn about the website’s backend activities.

When we set a background image at the beginning level, we face some difficulties. In this tutorial, how to apply a background image in CSS, you will learn how to do it easily with examples. And if you construct the project in HTML and CSS, these will be useful.

How to Apply a Background Image in CSS?

CSS stands for Cascading Style Sheet. It is a computer language used in the styling of markup languages. HTML is an important markup language. The website was built using HTML. You have some control over how HTML and CSS are applied for styling and design.

Web developers can use CSS to separate the content of a web page from its style and layout. When designing and maintaining websites, this division allows for better flexibility and efficiency. CSS follows the cascading principle, which means that many style rules can be applied to an element, with the most specific rule taking importance.

This allows for the development of advanced styles as well as the ability to override or inherit styles from parent items. Advanced layout methods, responsive design for mobile devices, transitions and animations, and even custom fonts are now supported.

Creating a Basic Website with HTML

CSS is just the Style up language, it uses for Style gives to our content. Every basic website is enough to use the vanilla CSS with the display “Hello World”.

<html>
   <head>Title</head>
   <body>
     <p>Hello World</p>
   </body>
</html>

In the case you do have not knowledge about HTML, then quickly go toward the HTML. Because HTML is the markup language and learning the HTML Elements. Because it helps to display your content. In HTML, there are two types of major tags. Which is the Pair tag and the single tag. Pair tags have the Opening as well as the closing but the single tag has only one opening. HTML plays a major role in Website making. So it’s important to learn HTML basics.

You can also check – Introduction to HTML – Basic Concepts for Beginners

In the example, there are four tags. Which is html tag, head tag, body tag, and p tag. HTML tag contains all the elements entered in HTML and it is written in <html> tag. The head tag contains this content which is not displayed on the website and is secreted but important to the website, it’s needed to build a website. Then another is the body tag, the all contain a display with the help of the body tag. The body tag contains all elements that are displayed on the webpage. And then last the p tag, p tag help to create the text mainly paragraph.

Adding CSS to HTML

Now you have the simple page, we customize with the style of CSS. Now we begin with a paragraph that gives a border with the CSS.

<html>
  <head>Title</head>
  <body>
    <p style="border-style: solid">Hello World</p>
  </body>
</html>

Now you have the border with the color black and the text is placed at the corner of the border. Now we give CSS to the border for the text to have padding or white space and then the text is located in the center with the help of CSS properties.

<html>
  <head>Title</head>
  <body>
    <p style="border-style: solid; padding: 30px; text-align: center">
      Hello World
    </p>
  </body>
</html>

Our website is looking good, but the text does not look perfect so we can give the header to the text. And information displayed in the header.

<html>
  <head>
    <style>
      p {
        text-align: center;
      }
      #Excssfile {
        border-style: solid;
        padding: 30px;
      }
    </style>
   </head>
   <body>
   <!-- How to Set a Background Image in CSS -->
  <p id="Borderstyle">Hello World</p>
  </body>
</html>

HTML is easy to read and Understand language if you know all its elements. CSS is the best language for styling the content.

Importing a CSS File to Your Website

If you can prefer the Internal CSS, styling the webpage is easy to understand but sometimes is quickly difficult. For that, the External CSS is best for all types. Simply link our CSS file with the HTML page then Run our HTML page you will get the CSS style.

<style>
  p {
   text-align: center;
  }
  #Borderstyle {
   border-style: solid;
   padding: 30px;
  }
</style>

Create the CSS file with the Extension of .css, then add style to the content. Now For example we give the CSS file name Excssfile.css. Link the CSS file with your HTML page.

<html>
  <head>
    <link rel="stylesheet" href="Excssfile.css" />
  </head>
  <body>
    <p id="Borderstyle">Hello World</p>
  </body>
</html>

Adding a Background Image with CSS

Now we give the Background image with the help of HTML and CSS. First Choose the Background image for your webpage. Remember, background Choose, all elements that can visible better.

body {
  background-image: url("natureimage.jpg");
}
p {
  text-align: center;
  font-size: 4rem;
}
#Borderstyle {
  border-style: solid;
}

Now our main topic is How to Set a Background Image in CSS, then let’s start. In the CSS the style is written between {} this bracket. In the body tag add the background image property. Add an image in the background image with the help of url(). But the image is not set perfectly on your webpage, for that use the following code.

body {
  background-image: url("natureimage.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

The background-repeat property is help to not repeat the background image. The background-size property help to resize your background-image, if you want to give full size then simply add the background-size: Cover; in the body tag. And last the Background-position property, which helps to set the position of your background image. Most of the time you need to select the Background-position: center; in the body tag.

Result:

How to Set a Background Image in CSS

Changing the Background Color

You change the background color easily with CSS. Now we make it Orange. You can modify it with the id of #borderstyle. Now we use the background color property for text.

body {
  background-image: url("natureimage.jpg");
  height: 100vh;
  background-position: center;
  background-size: cover;
}
p {
  text-align: center;
}
#Borderstyle {
  background-color: white;
  color: black;
  border: 2px solid white;
  padding: 30px;
}

Much Awesome.

Continuing to Design Your Website with CSS

Now you learned, how to apply background image in HTML using CSS as well as how to change the background color. If you learned HTML, then you should get help with the HTML cheat sheet for strong concepts.

How to Apply a Background Image in CSS?