CODEWITHSUNDEEP
css
IanR
IanR

Reputation: 11

CSS: Background-Image not displaying?

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%}

Upvotes: 1

Views: 203

Answers (3)

IanR
IanR

Reputation: 11

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');}

Upvotes: 0

atrljoe
atrljoe

Reputation: 8151

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.

Upvotes: 1

MichaelJGLeeson.com
MichaelJGLeeson.com

Reputation: 1

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>

Upvotes: 0

Related Questions