CSS: Background-Image not displaying?

Question

I'm having a headache of a time trying to code an image, that's in the same directory as the html and css files. My marker image for bullet points works without a problem, but my background-image for the header doesn't seem to work. I ran it through a css validator and nothing shows up.

EDIT: What I want to accomplish now that I know my image is loading, is to figure out how to overlay my image on top of the h1 element.

HTML5:

<!DOCTYPE html>

<head>
    <link style = "text/css" rel ="stylesheet" href = "pacific.css">
    <title>Pacific Trails Resort</title>
    <meta Charset="utf-8">

</head>

<body>
    <header>
        <h1>Pacific Trails Resort</h1>
    </header>

    <nav>
        <a href = "index.html">Home</a>
        &nbsp;
        <a href = "yurts.html">Yurts</a>
        &nbsp;
        <a href = "activities.html">Activities</a>
        &nbsp;
        <a href = "reservations.html">Reservations&nbsp;</a>
    </nav>

    <main>
        <h2>Enjoy Nature In Luxury</h2>

        <img src = "coast.jpg" alt = "Pacific Trails Resort" height = "250" width = "320">

        <p><span class = "resort">Pacific Trails Resort</span> offers a special lodging experience on the California North Coast. 
        Relax in serenity with panoramic views of the Pacific Ocean.</p>

        <ul>
            <li>Private yurts with decks overlooking the ocean</li>
            <li>Activities lodge with fireplace and gift shop</li>
            <li>Nightly fine dining at the Overlook Cafe</li>
            <li>Heated outdoor pool and whirlpool</li>
            <li>Guided hiking tours opf the redwoods</li>
        </ul>

        <div>
            <span class ="resort">Pacific Trails Resort</span>
            <br>
            12010 Pacific trails Road
            <br>
            Zephyr, CA 95555
            <br>
            <br>
            888-555-5555
            <br>
        </div>

        <br>

    </main>

    <footer>
        Copyright &copy; 2016 Pacific Trails Resort
        <br>
        <a href = "mailto:[email protected]">Contact Ian Rosenberg</a>
    </footer>

</body>

CSS:

body{background-color: #FFFFFF; color: #666666; font-family: Arial, Helvetica, sans-serif}

header{ background-image: url('sunset.jpg');
background-position: right; 
background-repeat: no-repeat;
line-height: 400%;
text-indent: 1em;}

h1{background-color: #000033; 
color: #FFFFFF}

nav{background-color: #90C7E3;
font-weight: bold}

nav a{text-decoration: none}

h1{margin-bottom: 0;
font-family: Georgia, Times New Roman, serif}

h2{color: #3399CC;
font-family: Georgia, Times New Roman, serif}

h3{font-family: Georgia, Times New Roman, serif}

ul{list-style-image: url("marker.gif")}

dt{color: #000033}

footer{font-size: 70%;
font-style: italic;
text-align: center;
font-family: Georgia, Times New Roman, serif}

.resort{color: #5C7FA3;
font-weight: bold}

#contact{font-size: 90%}

atrljoe · Accepted Answer · 2016-10-11 17:28:22Z

1

Your background is loading its just hidden. The problem you are seeing is that your H1 element is covering up the entire background because it's display is set to block (which is default for H1 elements.

I am not sure how you want it to display but you have lots of options. You could remove the background-color from the H1 css definition. Which would make the background appear. DEMO

Or you could change the display of the H1 element to inline-block or inline depending on your requirements. DEMO

Finally you could set a height of your header class that would still allow the background color of the H1 to show up. DEMO

Again these are a few possibilities still plenty of other ways you could change it. I dont know what your ultimate design goal is so you have to determine the next steps really. But that is the cause of why you cannot see your background.

NOTE: I changed the H1 class in your CSS for the first two. If you do go this route I suggest that you target that H1 more precisely because I dont think you would want the same style for the H1 header applied to other H1's in your page. I did it simply to illustrate how you could fix it.

edited Oct 11, 2016 at 17:28

answered Oct 11, 2016 at 17:02

atrljoe

8,16111 gold badges69 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

IanR Over a year ago

Is it possible to have the image on top of the black background? The image fades off to black so it keeps the transition smooth.

atrljoe Over a year ago

Something like this? jsfiddle.net/d7nqmh6e/3 All I did here was set the background-color to black and then added a height, and made the image not repeat.

MichaelJGLeeson.com · Accepted Answer · 2016-10-11 17:13:18Z

Remove your h1 color style it's overriding the background image style. Also your .nav color rule. Use firebug or chromes inspect element to go through your styles and see which ones are overriding which. You can turn off and on various styles to see which works.

body {
  background-color: #FFFFFF;
  color: #666666;
  font-family: Arial, Helvetica, sans-serif
}

header {
  background-image: url(http://fandom.wikia.com/wp-content/uploads/2016/09/Arrowverse.jpg);
  background-position: right;
  background-repeat: no-repeat;
  line-height: 400%;
  text-indent: 1em;
}

h1 {
  /* remove this 
  background-color: #000033; */
  
  color: #FFFFFF
}

nav {
 
  background-color: #90C7E3;

  font-weight: bold
}

nav a {
  text-decoration: none
}

h1 {
  margin-bottom: 0;
  font-family: Georgia, Times New Roman, serif
}

h2 {
  color: #3399CC;
  font-family: Georgia, Times New Roman, serif
}

h3 {
  font-family: Georgia, Times New Roman, serif
}

ul {
  list-style-image: url("sqpurple.gif")
}

dt {
  color: #000033
}

footer {
  font-size: 70%;
  font-style: italic;
  text-align: center;
  font-family: Georgia, Times New Roman, serif
}

.resort {
  color: #5C7FA3;
  font-weight: bold
}

#contact {
  font-size: 90%
}

<header>
  <h1>Pacific Trails Resort</h1>
</header>

<nav>
  <a href="index.html">Home</a> &nbsp;
  <a href="yurts.html">Yurts</a> &nbsp;
  <a href="activities.html">Activities</a> &nbsp;
  <a href="reservations.html">Reservations&nbsp;</a>
</nav>

<main>
  <h2>Enjoy Nature In Luxury</h2>

  <img src="coast.jpg" alt="Pacific Trails Resort" height="250" width="320">

  <p><span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the California North Coast. Relax in serenity with panoramic views of the Pacific Ocean.</p>

  <ul>
    <li>Private yurts with decks overlooking the ocean</li>
    <li>Activities lodge with fireplace and gift shop</li>
    <li>Nightly fine dining at the Overlook Cafe</li>
    <li>Heated outdoor pool and whirlpool</li>
    <li>Guided hiking tours opf the redwoods</li>
  </ul>

  <div>
    <span class="resort">Pacific Trails Resort</span>
    <br> 12010 Pacific trails Road
    <br> Zephyr, CA 95555
    <br>
    <br> 888-555-5555
    <br>
  </div>

  <br>

</main>

<footer>
  Copyright &copy; 2016 Pacific Trails Resort
  <br>
  <a href="mailto:[email protected]">Contact Ian Rosenberg</a>
</footer>

IanR · Accepted Answer · 2016-10-12 00:03:30Z

0

I figured out what I was doing wrong, the exercise I was following did not have a background color or color attribute on the h1 element. To display the image on top of the background I changed my header code to

header{background-color: #000033; 
    color: #FFFFFF;
    background-position: right; 
    background-repeat: no-repeat;
    line-height: 400%;
    text-indent: 1em;
    background-image: url('sunset.jpg');}

answered Oct 12, 2016 at 0:03

IanR

113 bronze badges

Collectives™ on Stack Overflow

CSS: Background-Image not displaying?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related