I just want a background image

Discussion in 'Introductions' started by FruhDude, Jan 3, 2020.

  1. FruhDude

    FruhDude

    Joined:
    Jan 3, 2020
    Messages:
    2
    Likes Received:
    0
    Finally started practicing my building process and currently stumped on how to add a background-image to my webpage:

    body {
    background-image: url("C:\Users\Henry Harrison II\Desktop\DevProject\Projects\Potiential works\Apartment Rental\Resources\Open.jpeg");
    background-repeat: no-repeat;
    background-position: center;
    }

    This is what is currently set-up in my CSS that doesn't put anything on the page. However THE SAME PATH:

    <img src="C:\Users\Henry Harrison II\Desktop\DevProject\Projects\Potiential works\Apartment Rental\Resources\Open.jpeg">

    Puts an image in on my page through HTML.

    No matter how I put it, I can't make a background-image only a regular <img> tag.

    If anyone could provide assistance that would be bomb.
     
    FruhDude, Jan 3, 2020
    #1
    1. Advertisements

  2. FruhDude

    independent

    Joined:
    Nov 23, 2019
    Messages:
    42
    Likes Received:
    1
    hi @FruhDude try first the same without quotation
    like this

    body { background-image: url(images.jpeg);
    }

    (if this does not work,then) I think your written pathway to relevant image should be wrong (but both the codes are working on my computer,so I am almost sure that the pathway you selected for that image should be wrong. furthermore,ensure you do other things right,too)

    one clue: if you ensure your that .html document and .jpeg document under the same directory then there should be no problem with pathway and your code will be like above (you will NOT to write the whole of address for image, only its name and extension.)
     
    Last edited: Jan 3, 2020
    independent, Jan 3, 2020
    #2
    1. Advertisements

  3. FruhDude

    sunfighter

    Joined:
    Nov 27, 2019
    Messages:
    34
    Likes Received:
    6
    Because the IMG tag works the CSS should work.
    This is code from someone else - the HTML is not important. The CSS is it should work:
    Code (Text):

    <!doctype html>
    <html>
    <head>
    <title>my webpage </title>
    <style>
    body, html {
      height: 100%;
      margin: 0;
      color:white;
    }

    #cover {
      background-image: url("C:\Users\Henry Harrison II\Desktop\DevProject\Projects\Potiential works\Apartment Rental\Resources\Open.jpeg");
      height: 100%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    </style>
    </head>

    <body>
      <div id="cover">
    <h1>big</h1>
    <p>
      this is <strong>bold</strong>
      this is <em>italic</em>
    </p>
    <p>
      this is <strong>bold</strong>
      this is <em>italic</em>
    </p>
    <a href="http://www.google.com">google.com</a>
    <br>
    <ul>
      <li><a href="page2.html">tshirts</a></li>
      <li><a href="page3.html">Hoodies</a></li>
    </ul>
    <br>
    <div></div>
    <span></span>
    </div>
    </body>
    </html>
     
    FYI - The word is spelled Potential in the URL address.
     
    sunfighter, Jan 3, 2020
    #3
  4. FruhDude

    FruhDude

    Joined:
    Jan 3, 2020
    Messages:
    2
    Likes Received:
    0
    Neither is working. Literally copy pasted sunfighter's code into my editor (Visual Studio) and only
    google.com

    hoodies
    t-shirts

    Show on the webpage.
     
    FruhDude, Jan 7, 2020
    #4
  5. FruhDude

    independent

    Joined:
    Nov 23, 2019
    Messages:
    42
    Likes Received:
    1
    Can you quote your full html document here?
     
    independent, Jan 7, 2020
    #5
  6. FruhDude

    sunfighter

    Joined:
    Nov 27, 2019
    Messages:
    34
    Likes Received:
    6
    Yes paste the entire code with the code I gave you added. And please again check and see where your image is located. And see if moving the picture into the same place your index.html file is and just call it with
    background-image: url("Open.jpeg");
    and check the name of the image.
     
    sunfighter, Jan 7, 2020
    #6
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.