Question 196094 in Html Question posted in
Some basic documentation can be found here.

Html – why background image is not loading my css file

I’m trying to load background image so I’m using the CSS background image URL but it is not working, which means it is not loading.

.home {
  display: flex;
  align-items: center;
  min-height: 100vh;
  background-image: url(../wordpress/img/online-training.jpg);
  background-size: cover;
  background-position: center;
}
<section class="home" id="home">
  <div class="content">
    <span>Take The Right Step <br>For Your Business</span>
    
    <p>Tax associate is a leading consultancy firm that provides simple, effective company registration and accounting solutions to enterprises in ireland</p>
    
    <a href="#" class="btn">Get Started</a>
  </div>
</section>
Tags:

2

Answers


  1. 0

    Your css is missing double quotes in the URL for background-image :

    CSS :

    background-image: url("../wordpress/img/online-training.jpg");

    Moreover, you should check your file’s path.

    Login or Signup to reply.
  2. 0

    This looks like the URL may not be correct. Try using the full URL and see if it loads e.g. https://website.com/wordpress/img/online-training.jpg. If that works then the relative URL syntax you’re using may need adjusting e.g. /wordpress/img/online-training.jpg.

    It will work without quotes but its better to have them in as suggested below.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search