CODEWITHSUNDEEP
htmlcssbackground-image
Jess
Jess

Reputation: 107

CSS background image not showing on my computer

I'm trying to use a local image as the background image for part of my website. However, after I have entered the URL of the image and run the project, nothing shows up. Could some please help me out. I am new to CSS and HTML. Your help would be greatly appreciated.

Code for HTML file:

<body>
    <header>
        <h1 class="logo">JN</h1>
        <nav>
            <ul>
                <li><a href="#about">About</a></li>
                <li><a href="#youtube">YouTube</a></li>
                <li><a href="#articles">Articles</a></li>
                <li><a href="#vine">Vine</a></li>
                <li><a href="#social">Social</a></li>
                <li><a href="#podcasts">Podcasts</a></li>
                <li><a href="#share">Share</a></li>
                <li><a href="#more">More</a></li>
            </ul>
        </nav>
        <a href="mailto:[email protected]">Email me</a>
    </header>
</body>

Code for CSS file:

h1.logo {
  visibility: hidden;
  background-image: url(JN-website-logo-Transparent-background.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

Path for CSS file on my computer is:

/Users/justin/Desktop/JN website/JN/public_html/CssAbout.css

Path for the image on my computer is:

/Users/justin/Desktop/JN website/JN/Image/JN-website-logo-Transparent-background.svg

Upvotes: 1

Views: 676

Answers (6)

Rene van der Lende
Rene van der Lende

Reputation: 5281

You mention

...after I have entered the URL of the image and run the project

This suggests that your webpage is running on a local http test server, which means that the server uses a domain or alias for your website(for example: localhost/JN website or 192.168.xxx.xxx/JN website).

The server puts this in front of the filename (as in http://localhost/Users/justin/Desktop/JN website/JN/Image/JN-website-logo-Transparent-background.svg) which does not exist. Try changing the CSS to background: url(../Image/JN-website-logo-Transparent-background.svg) this is a relative path to the image and should be found by the server (as in localhost/Image/JN-website-logo-Transparent-background.svg).

And, of course, remove h1 {visibility: hidden}

Upvotes: 0

Candlejack
Candlejack

Reputation: 445

h1.logo {
 background-image: url(JN-website-logo-Transparent-background.svg);
 background-repeat: no-repeat;
 background-position: center;
 background-size: contain;

 font-size: 0px;
 line-height: 20px;
}

The font size and line-height properties should make the text inside your h1 invisible without hiding the background-image. The line-height specifically is what prevents the h1 from shrinking down too much.

Upvotes: 0

Ricardo Alves
Ricardo Alves

Reputation: 652

you can try adding size to h1

h1.logo {
  background-image: url(http://domaingang.com/wp-content/uploads/2012/02/example.png);
  //your image
  //background-image: url(JN-website-logo-Transparent-background.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width:200px;
  height:200px;
}
<body>
    <header>
        <h1 class="logo"></h1>
        <nav>
            <ul>
                <li><a href="#about">About</a></li>
                <li><a href="#youtube">YouTube</a></li>
                <li><a href="#articles">Articles</a></li>
                <li><a href="#vine">Vine</a></li>
                <li><a href="#social">Social</a></li>
                <li><a href="#podcasts">Podcasts</a></li>
                <li><a href="#share">Share</a></li>
                <li><a href="#more">More</a></li>
            </ul>
        </nav>
        <a href="mailto:[email protected]">Email me</a>
    </header>
</body>

let me know if the image appear now.

Upvotes: 0

Collins Abitekaniza
Collins Abitekaniza

Reputation: 4578

Try removing the visibility: hidden; statement

Or change it to visibility: visible;

Upvotes: 0

Berendschot
Berendschot

Reputation: 3104

There are two remarkable lines in your CSS:

  1. visibility: hidden;

Well I think that this line speaks for itself. It causes h1 to be invisible. You can safely remove this line.

  1. background-image: url(JN-website-logo-Transparent-background.svg);

For this line we have to take a look at the following:

Path for CSS file on my computer is:

/Users/justin/Desktop/JN website/JN/public_html/CssAbout.css

Path for the image on my computer is:

/Users/justin/Desktop/JN website/JN/Image/JN-website-logo-Transparent-background.svg

You've set the background-image to a file JN-website-logo-Transparent-background.svg. But this file is not in the same folder as your CSS file. You'll have to change that line to: background-image: url('...'); where the dots have to be replaced with your image file path.

Upvotes: 0

Sandeeproop
Sandeeproop

Reputation: 1776

remove visibility:hidden

h1.logo {
 background-image: url(JN-website-logo-Transparent-background.svg);
 background-repeat: no-repeat;
 background-position: center;
 background-size: contain;
}

Upvotes: 1

Related Questions