How do I select a local background image for a section in my website?-CodePudding

I want to have a background image for this #title# section. When I upload the image to some website and paste the link in my CSS like background: url(www.imagelink.com/image)it works. However, when I want to do the same thing with a local image for example background: url(images/folder/image.jpg), it doesn't work. Nothing appears in my page when I do it locally. Any help will be appreciated.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Sarraf Battal Ünal</title>
    <!-- Bootstrap -->
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6 fzT"
      crossorigin="anonymous" />
    <!-- External CSS -->
    <link rel="stylesheet" href="css/styles.css" />
    <!--  Google fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&family=Montserrat:wght@300;400;700;900&family=Open Sans:wght@400;700&family=Ubuntu:wght@400;700&display=swap"
      rel="stylesheet" />
    <!-- Font awesome -->
    <script src="https://kit.fontawesome.com/3f441d9c50.js" crossorigin="anonymous"></script>
  </head>

  <body>
    <section id="title">
      <div  id="my-navbar-container">
        <!-- Nav Bar -->
        <nav >
          <a href="" >
            <img src="images/battalunal-white-final1-removebg-preview1.png" alt="sarraf-logo" />
          </a>
          <button
            
            type="button"
            data-toggle="collapse"
            data-target="#navbarToggler01"
            aria-controls="navbarToggler01"
            aria-expanded="false"
            aria-label="Toggle navigation">
            <span ></span>
          </button>
          <div  id="navbarToggler01">
            <ul >
              <li >
                <a href="" >Ana Sayfa</a>
              </li>
              <li >
                <a href="" >Katalog</a>
              </li>
              <li >
                <a href="" >Kurumsal</a>
              </li>
              <li >
                <a href="" >İletişim</a>
              </li>
            </ul>
          </div>
        </nav>
      </div>
      <div >
        <!-- Title -->
        <div >
          <div >
            <h1 id="slogan-h1">Buraya kısa slogan gelecek. Buraya kısa slogan gelecek.</h1>
            <div >
              <button type="button" >
                <span ></span> Bize Ulaşın
              </button>
              <button type="button" >
                <span ></span> Güncel Fiyatlar
              </button>
            </div>
          </div>
          <div >
            <!-- Add image or slider in this column 
          <img src="images/iphone6.png" alt="iphone-mockup" /> -->
          </div>
        </div>
      </div>
    </section>

CodePudding user response：

Your website is stored on a server if it's a live site. So to the server that the site lives on your file path images/folder/image.jpg doesn't get found on the server that the site lives on (because the file is in that location on your machine not your sites machine basically). If your trying to find an alternative to uploading the file to the site you could add it to a sharing system like google cloud and use the link to view the photo as your background image url.

If your site is a local build still and the site lives at /users/sites/mysite and your images live at /users/images you would have to navigate backwards through the files from /mysite to get back to the /users folder then you can use the file path that you have , it can be a bit tricky to get it the first time but once you find your file path you should have no issues recreating the same selector to get photos from the /images/folder folder to display on your site. you can navigate backwards through the folders by using ../ in your url selection. In the above example getting from /mysite back to /users would require your css selector to look like this url(../../images/folder/image.jpg) where each of the ../ will take you out of a folder until your pointing to the /users folder then from there you can go into your images folder and find the file your trying to get added.

CodePudding user response：

If the directory that contains your images is outside the directory that contains your css file, then the path should be url(../images/folder/image.jpg) instead of url(images/folder/image.jpg). The ../ means to go up one level to the directory that contains the current directory.