CODEWITHSUNDEEP
htmlcss
vKarnival
vKarnival

Reputation: 11

Header image not appearing

I'm trying to have a header banner in my html assignment however I cannot get the header image to appear.. or any background-image.

Here is my code

All of the files are in a folder named assign1_1, images are in a folder named images, css is in a folder named styles.

Everything else in the css works however the image doesn't. Help would be appreciated!

    * {
      padding: 0;
      margin: 0;
      font-family: Arial
    }

    #footer {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      text-align: center;
    }

    header{
      text-align: left;
      padding: 20px;
      margin-top: 35px; 
      background: url("images/bg.jpg") no-repeat; 
      height: 100%;
      width: 97%;

    }

    nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        background-color: black;
        position: fixed;
        top: 0;
        width: 100%;
        display: flex;
        justify-content: space-around;
    }

    li {
        float: left;
    }

    li a {
        display: block;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        color:white;
    }

    section{
      padding: 20px;
    }

    body{
      background-color: lightblue;
    }

    li a:hover:not(.active) {
        border-bottom: 5px solid lightgreen;
    }

    .active {
        border-bottom: 5px solid green;
    }
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="utf-8" />
    	<meta name="description" content="Index page for assignment" />
    	<meta name="keywords" content="eCommerce, web" />
    	<meta name="author" content="102102704" />
    	<link rel="stylesheet" type="text/css" href="styles/style.css" >
    	<title>Introduction to eCommerce on the Web</title>
    </head>

    <body>
    	<header>
    		<h1>eCommerce on the Web</h1>
    	</header>
    		
    		<nav>
    			<ul>
    			<li><a class="active" href="#index"> Home </a></li> 	
    			<li><a href="#topic"> What is eCommerce? </a></li> 	
    			<li><a href="#quiz"> eCommerce Quiz </a></li> 	
    			<li><a href="#enhancements"> Enhancements made </a></li> 
    			</ul>
    		</nav>

    	<section>
    		<br />
    		<h2>Do you want to learn about eCommerce?</h2>
    		<p> You have come to the right spot!</p>
    		Click Here to learn more
    	</section>

    <div id="footer">
    <footer>
    	<a href="[email protected]">Contact me</a>
    </footer>
    </div>
    </body>

    </html>

Upvotes: 1

Views: 89

Answers (2)

Fel
Fel

Reputation: 362

First try to edit in your elements

first edit your css like this

/*changes top 60px or its up to you */

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: black;
    position: fixed;
    top: 60px;
    width: 100%;
    display: flex;
    justify-content: space-around;
}

Then Copy my HTML code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="description" content="Index page for assignment" />
    <meta name="keywords" content="eCommerce, web" />
    <meta name="author" content="102102704" />
    <link rel="stylesheet" type="text/css" href="styles/style.css" >
    <title>Introduction to eCommerce on the Web</title>

</head>

<body>

    <!-- this is added to your code as sample -->
    <div class="header">
            <h1><Center>Header</Center></h1>
    </div>

    <nav>
            <ul>
            <li><a class="active" href="#index"> Home </a></li>     
            <li><a href="#topic"> What is eCommerce? </a></li>  
            <li><a href="#quiz"> eCommerce Quiz </a></li>   
            <li><a href="#enhancements"> Enhancements made </a></li> 
            </ul>
        </nav>



    <section>
        <br />
        <h2>Do you want to learn about eCommerce?</h2>
        <p> You have come to the right spot!</p>
        Click Here to learn more
    </section>

<div id="footer">
<footer>
    <a href="[email protected]">Contact me</a>
</footer>
</div>
</body>

</html>

That is only a sample if you want a background image you need to set background image inside header class. hope it helps you

Upvotes: 0

Tanner Babcock
Tanner Babcock

Reputation: 3350

Make sure the current web page is in the same directory with "images" and "styles". Does your directory tree look like this?

- assign1_1
- - file.html
- - styles
- - - style.css
- - images
- - - bg.jpg

Or is assign1_1 in the same folder as the others? You might want to change images/bg.jpg to ../images/bg.jpg if it is. I tested your code using a stock blue sky image from Google Images, it seems to be working fine. You were missing a semicolon in the universal selector block with "Arial".

* {
    padding: 0;
    margin: 0;
    font-family: "Arial";
}

#footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
}

header {
    text-align: left;
    padding: 20px;
    margin-top: 35px; 
    background: url("https://image.freepik.com/free-photo/blue-sky-with-clouds_1232-936.jpg") no-repeat; 
    height: 100%;
    width: 97%;
    display:flex;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: black;
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
}

li {
    float: left;
}

li a {
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    color:white;
}

section{
  padding: 20px;
}

body{
  background-color: lightblue;
}

li a:hover:not(.active) {
    border-bottom: 5px solid lightgreen;
}

.active {
    border-bottom: 5px solid green;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<meta name="description" content="Index page for assignment" />
	<meta name="keywords" content="eCommerce, web" />
	<meta name="author" content="102102704" />
	<link rel="stylesheet" type="text/css" href="styles/style.css" >
	<title>Introduction to eCommerce on the Web</title>
</head>

<body>
	<header>
		<h1>eCommerce on the Web</h1>
	</header>
		
		<nav>
			<ul>
			<li><a class="active" href="#index"> Home </a></li> 	
			<li><a href="#topic"> What is eCommerce? </a></li> 	
			<li><a href="#quiz"> eCommerce Quiz </a></li> 	
			<li><a href="#enhancements"> Enhancements made </a></li> 
			</ul>
		</nav>

	<section>
		<br />
		<h2>Do you want to learn about eCommerce?</h2>
		<p> You have come to the right spot!</p>
		Click Here to learn more
	</section>

<div id="footer">
<footer>
	<a href="[email protected]">Contact me</a>
</footer>
</div>
</body>

</html>

I found it odd you have your <footer> nested inside of a <div id="footer">, instead of being alongside <header> and <nav>. You could get rid of the nesting and just do footer instead of #footer in the CSS.

Upvotes: 1

Related Questions