Databases
StackOverflow2013
Postsdbo
POBackground image not displaying on a link in navbar
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBackground image not displaying on a link in navbar
    text
    copied!<p>I've got an image of a house I want to display on my navbar as the 'home' link. I've entered some CSS to implement this but it doesn't seem to work. Could anyone help me display the image? See the image and CSS code below for clarification.</p> <p><img src="https://i.stack.imgur.com/Ok59P.png" alt="enter image description here"></p> <p>The light blue box is where the little white house should be. See below for CSS</p> <pre><code>html, body { padding: 0; margin-right: auto; margin-left: auto; } .navbar { height: 48px; width: 100%; background-color: #294052; text-align: center; vertical-align: middle; margin-bottom: 10px; } li { display: inline; position: relative; padding: 20px; border-right: inset 2px white; font-size: 20px; font-weight: normal; font-family: sans-serif; vertical-align: middle; padding-top: 31px; padding-bottom: 14px; } a { text-decoration: none; color: white; } li:hover { text-decoration: underline; background-color: #447294; } li.home { background-color: #447294; background-image: url('home.png'); } span { font-weight: bold; } </code></pre> <p>I've tried using the <code>display:block</code> fix but it just messes up the rest of my navbar.</p> <p>And the HTML code...</p> <pre><code>&lt;div class="navbar"&gt; &lt;ul&gt; &lt;a href="#"&gt;&lt;li class="home"&gt;&lt;/li&gt;&lt;/a&gt; &lt;a href="#"&gt;&lt;li&gt;ABOUT&lt;/li&gt;&lt;/a&gt; &lt;a href="#"&gt;&lt;li&gt;CyMAL: MUSEUMS, ARCHIVES AND LIBRARIES&lt;/li&gt;&lt;/a&gt; &lt;a href="#"&gt;&lt;li&gt;CONTACT&lt;/li&gt;&lt;/a&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload