Unable to get any image to work as background image in CSS

user_14615378 0
Viewed 69

I'm trying to add an image in my CSS file for a background from a local file. I've tried everything from ../img/img1.jpeg to just img1.jpeg, etc. I've even tried to add the website URL that the tutorial is using and it's still not working. This is what I'm working with so far.

Here is the CSS and HTML:

  .intro {
  height: 100%;
  width: 100%;
  margin: auto;
  background: url("../img/Stone Wall Witch Hut Watermarked.jpeg") no-repeat 50% 50%;
<secion class="intro">
  <nav>
    <a href="#" id="menu-icon"></a>
    <ul>
      <li><a href="#about">About Me</a></li>
      <li><a href="#port">Portfolio</a></li>
      <li><a href="#serv">Services</a></li>
      <li><a href="#contact">Contact Me</a></li>
    </ul>
  </nav>
  <div ckass="inner">
    <div class="content">
      <h1>Photography</h1>
      <p>my pictures</p>
    </div>
  </div>
  </section>

The URL I was using from the tutorial is:https://static.pexels.com/photos/248159/pexels-photo-248159.jpeg

The image I would like to use is in a Folder titled img. The parent folder is called Photography Starter Files. The img folder, HTML, and CSS are all in this. No matter what I put in the background, I cannot get anything to show up.

local-files background css html
2 Answers

As mentioned by blurfus in the comments, you had an error in your HTML. The opening <section> tag was misspelled as <secion>. You also didn't have a closing } for the CSS in your snippet.

See the snippet below for a working version. You were very close! Note that I used the direct web link to your photo so it would work in the snippet.

.intro {
    height: 100%;
    width: 100%;
    margin: auto;
    background: url("https://static.pexels.com/photos/248159/pexels-photo-248159.jpeg") no-repeat 50% 50%;
}
<section class="intro">
    <nav>
        <a href="#" id="menu-icon"></a>
        <ul>
            <li><a href="#about">About Me</a></li>
            <li><a href="#port">Portfolio</a></li>
            <li><a href="#serv">Services</a></li>
            <li><a href="#contact">Contact Me</a></li>
        </ul>
    </nav>
    <div ckass="inner">
        <div class="content">
            <h1>Photography</h1>
            <p>my pictures</p>
        </div>
    </div>
</section>

user_62594280

I can spot two errors that might be causing this.

  1. the .intro tag in the css file is missing a closing curly brace
  2. the section tag in the html file is spelled incorrectly

Otherwise it seems to be working fine. Recreated your example

user_50325940
Related