Photoshop Question posted in
The official user guide can be found here.

Why can't I get the hero image to show in my CSS? – Photoshop

I am a reasonably competent c# programmer, just starting to mess around with HTML and CSS etc.
I was playing around on Neocities, trying to set up a background image for my text and, well, absolutely nothing is showing despite my best efforts.

The html amd images are in the same directory (I know, I’ll fix that later!).

Can anybody take a look at this code and point me in the right direction?

Best regards,

—Rev

EDIT: Good grief, thanks for all the notes & edits. Have added a sample of the html for the page below. It’s quite a large page and I’m not completely comfortable with uploading the content here as it relates to a project I want to recruit artists for – I don’t want to make the entirety of the page available just yet. Instead, I’ve grabbed some samples of typical paragraphs, etc.

Most of the comments within the text come from the Neocities boilerplate, which I haven’t yet deleted.

Thanks for taking the time to look at this newbies work.

/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

a:link {
  color: #cc0000;
}

a:visited {
  color: #999999;
}

a:hover {
  color: #ff3300;
}

body {
  background-color: #323238;
  color: #648381;
  font-family: Verdana;
  word-wrap: break-word;
  width: 640px;
  */
}

.hero-image {
  /* background-image: url(powerNode45Degrees01001RS.png); /* The image used */
  background-image: url("emotionalComp01.png");
  /* background-color: #323238; /* Used if the image is unavailable */
  /* height: 1024px; /* You must set a specified height */
  /* background-position: center center; /* Center the image */
  /* background-repeat: no-repeat; /* Do not repeat the image */
  /* background-size: cover; /* Resize the background image to cover the entire container */
}
<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">
  <title>Project Factotum Concept Artist Recruitment</title>
  <!-- The style.css file allows you to change the look of your web pages.
         If you include the next line in all your web pages, they will all share the same look.
         This makes it easier to make new pages for your site. -->
  <link href="/style.css" rel="stylesheet" type="text/css" media="all">

</head>
<!--<img src="powerNode45Degrees01001RS.png" />-->

<body>
  <img src="superSuperSuperSuperEarly3DSketch01.png" alt="A VERY early 3D concept" title="A VERY early 3D concept" />

  <h1>Generic Heading</h1>

  <p>I am an experienced game developer (C#/Unity/Blender/Photoshop/Krita) with multiple completed mobile projects for clients (can provide information on a number of them, am under NDA for others).</p>
  <p>While I’m a decent modeller, I don’t have the genius for design that this project demands - hence recruiting a 2D concept artist!</p>

  <h2 id="ARTISTREQUIREMENTS">ARTIST REQUIREMENTS</h2>
  <ul>
    <li>2D concept artist, potentially a generalist. 3D concepts are cool, but not essential.</li>
    <li>Artist should be able to collaborate using Skype / Discord / Gmail / Google Docs.</li>
    <li>Candidate must demonstrate a firm grasp of colour theory, composition, anatomy, working visual hierarchies, developing clear unique silhouettes.</li>
    <li>Ideally, artist will be willing to do rough paint-overs of environment screenshots to show designs in-situ.


      <li>Should be able to follow <a href="https://wiki.unrealengine.com/Assets_Naming_Convention">this naming convention</a></li>
  </ul>

</body>

</html>
Tags:

3

Answers


  1. 0

    The CSS looks fine, there might be an issue in HTML. Did you add id="hero-image" in your div or class="hero-image" because if you added an ID the CSS should be like this:

    #hero-image {
    background-image: url("emotionalComp01.png");
    }

    And if you added CLASS it should be like this:

    .hero-image {
    background-image: url("emotionalComp01.png");
    }

    But if that is not the problem, you will need to post the html here.

    Login or Signup to reply.
  2. 0

    You have created a class rule in css to display an image as a background of and element :

    .hero-image {
  /* background-image: url(powerNode45Degrees01001RS.png); /* The image used */
  background-image: url("emotionalComp01.png");
  /* background-color: #323238; /* Used if the image is unavailable */
  /* height: 1024px; /* You must set a specified height */
  /* background-position: center center; /* Center the image */
  /* background-repeat: no-repeat; /* Do not repeat the image */
  /* background-size: cover; /* Resize the background image to cover the entire container */
}

    Then you need to tell on which element or elements you need to apply this css rule with class attribute as class="hero-image". Here you can apply it to <p> and <ul> elements like :

    <!DOCTYPE html>
<html>
  <head>

    <meta charset="UTF-8">
    <title>Project Factotum Concept Artist Recruitment</title>
    <!-- The style.css file allows you to change the look of your web pages.
         If you include the next line in all your web pages, they will all share the same look.
         This makes it easier to make new pages for your site. -->
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">

  </head>
  <!--<img src="powerNode45Degrees01001RS.png" />-->
  <body>
    <img src="superSuperSuperSuperEarly3DSketch01.png" alt="A VERY early 3D concept" title="A VERY early 3D concept" />

    <h1>Generic Heading</h1>

    <p class="hero-image">I am an experienced game developer (C#/Unity/Blender/Photoshop/Krita) with multiple completed mobile projects for clients (can provide information on a number of them, am under NDA for others).</p>
    <p>While I’m a decent modeller, I don’t have the genius for design that this project demands - hence recruiting a 2D concept artist!</p>

    <h2 id="ARTISTREQUIREMENTS">ARTIST REQUIREMENTS</h2>
    <ul class="hero-image">
      <li>2D concept artist, potentially a generalist. 3D concepts are cool, but not essential.</li>
      <li>Artist should be able to collaborate using Skype / Discord / Gmail / Google Docs.</li>
      <li>Candidate must demonstrate a firm grasp of colour theory, composition, anatomy, working visual hierarchies, developing clear unique silhouettes.</li>
      <li>Ideally, artist will be willing to do rough paint-overs of environment screenshots to show designs in-situ.</li>


    <li>Should be able to follow <a href="https://wiki.unrealengine.com/Assets_Naming_Convention">this naming convention</a></li>
    </ul>

  </body>
</html>

    And the background image shoud display in both the paragraph and the UL list.

    Login or Signup to reply.
  3. 0

    Your HTML has no mention of the hero-image class. That’s the main problem. I added a surrounding div with a class of hero-image, and used a placeholder ‘hero’ image (wiki superman logo) to demonstrate the solution. The file path includes the domain name, folder, name of file. This may be shortened on your own hosting (to exclude the domain name, and begin with a backslash) but as you are just beginning, I recommend you use the full path

    Also ensure the following:
    -that the file is not corrupt
    -that the filename is correctly spelled

    Hope this helps

    a:link {
  color: #cc0000;
}

a:visited {
  color: #999999;
}

a:hover {
  color: #ff3300;
}

body {
  background-color: #323238;
  color: #648381;
  font-family: Verdana;
  word-wrap: break-word;
  width: 640px;
  */
}

.hero-image {
  /* background-image: url(powerNode45Degrees01001RS.png); /* The image used */
  background-image: url("https://upload.wikimedia.org/wikipedia/en/thumb/e/ea/Superman_shield.svg/1200px-Superman_shield.svg.png");
  /* background-color: #323238; /* Used if the image is unavailable */
  /* height: 1024px; /* You must set a specified height */
  /* background-position: center center; /* Center the image */
  /* background-repeat: no-repeat; /* Do not repeat the image */
  background-size: contain; /* Resize the background image to cover the entire container */
}
    <!DOCTYPE html>
<html>
  <head>
  
    <meta charset="UTF-8">
    <title>Project Factotum Concept Artist Recruitment</title>
    <!-- The style.css file allows you to change the look of your web pages.
         If you include the next line in all your web pages, they will all share the same look.
         This makes it easier to make new pages for your site. -->
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
  
  </head>
  <!--<img src="powerNode45Degrees01001RS.png" />-->
  <body>
  <div class="hero-image">
    <img src="superSuperSuperSuperEarly3DSketch01.png" alt="A VERY early 3D concept" title="A VERY early 3D concept" />
  
    <h1>Generic Heading</h1>

    <p>I am an experienced game developer (C#/Unity/Blender/Photoshop/Krita) with multiple completed mobile projects for clients (can provide information on a number of them, am under NDA for others).</p>
    <p>While I’m a decent modeller, I don’t have the genius for design that this project demands - hence recruiting a 2D concept artist!</p>

    <h2 id="ARTISTREQUIREMENTS">ARTIST REQUIREMENTS</h2>
    <ul>
      <li>2D concept artist, potentially a generalist. 3D concepts are cool, but not essential.</li>
      <li>Artist should be able to collaborate using Skype / Discord / Gmail / Google Docs.</li>
      <li>Candidate must demonstrate a firm grasp of colour theory, composition, anatomy, working visual hierarchies, developing clear unique silhouettes.</li>
      <li>Ideally, artist will be willing to do rough paint-overs of environment screenshots to show designs in-situ.
  

    <li>Should be able to follow <a href="https://wiki.unrealengine.com/Assets_Naming_Convention">this naming convention</a></li>
    </ul>
    </div>
    
  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search