My background isn't working!

Community Off Topic
1

I’m trying to get a background image on my header section! I don’t know why it isn’t working… I a, trying to put header.jpg as my header background
NOTE Please disregard other bugs and problems… I will get to those soon (^:

I have Italicised and Bolded the important bits!

CSS

_**header {**_
_**	background-image: url("imgs/header.jpg");**_
_**}**_
header a:hover {text-decoration: underline;}
header a {text-decoration: none; color: white;}


section.about-me-photo img{width: 50%; float: left; }

HTML

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" media="screen" href="css/css.css">
		<meta content="imgs/icon.ico" itemprop="image"><link href="imgs/icon.ico" rel="shortcut icon">
		<title> William Baum - Home </title>
	</head>

	<body>
		_**<header>**_
_**			<a class="logo" title="William Baum" href="#"> <span>William Baum</span> </a>**_
_**			<h1> Hi my name is <a href="">William Baum</a> and I am a <a href="#"> film-maker</a> and a <a href="#">web-developer</a>! </h1> **_
_**		</header>**_

		<section class="about-me">
	
			<section class="about-me-photo">
				<img src="imgs/camera.JPG" width="48%" title="I Love making films with my camera!"/>
			</section>
			
			<aside class="about-me-photo-and-link">
				<img src="imgs/round_me.jpg" title="A picture of me" width="48%"/>
				<a href="#" id="btn"> Learn More About me </a>
			</aside>
			
		</section>

		<div class="websites">
<div class="websites-img-1">
	<img src="imgs/code.jpg"
</div>
<div class="websites-paragraph">
<p>Bed sincerity yet therefore forfeited his certainty neglected questions. Pursuit chamber as elderly amongst on. Distant however warrant farther to of. My justice wishing prudent waiting in be. Comparison age not pianoforte increasing delightful now. Insipidity sufficient dispatched any reasonably led ask. Announcing if attachment resolution sentiments admiration me on diminution.  </p>
</div>
<div class="websites-alert-js">
	
		<button onclick="myFunction()">Press Me!</button>

		<script>
			function myFunction() {
			alert("Hello Welcome To My Website!");
			}
</script>
</div>

<div class="films">

	<div class="films-paragraph">
		<p> Bed sincerity yet therefore forfeited his certainty neglected questions. Pursuit chamber as elderly amongst on. Distant however warrant farther to of. My justice wishing prudent waiting in be. Comparison age not pianoforte increasing delightful now. Insipidity sufficient dispatched any reasonably led ask. Announcing if attachment resolution sentiments admiration me on diminution. </p>
	</div>
	
	<div class="films-video">
		<iframe src="https://www.youtube.com/watch?v=ESiUd2iEU&feature=youtu.be"
		width="560" height="315" frameborder="0" title="One of my videos!" allowfullscreen></iframe>
	</div>

</div>
</div>


<div class="footer">
&copy William Baum 2016 <a href="#">Films</a> , <a href="#">Websites</a> , <a href="#">About Me</a>
</div>
</body>

</html>
2

Hi,

This you are testing it offline on your pc?
Is your CSS code in the folder css? And the CSS folder is in the same location as your HTML?

Have you see that your other styles are appearing? Your CSS is rendering?

Now the image, you have the file type correct? Right location?

3

@baumy,
Try using

background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");

background-image: url(“https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png”);
which is a valid and active image…

Some interesting articles
http://stackoverflow.com/questions/6512800/html5-header-element-not-displaying-background-image
http://stackoverflow.com/questions/27349112/how-do-i-add-a-background-image-to-my-header
http://stackoverflow.com/questions/4781077/html5-best-practices-section-header-aside-article-tags

4

Thanks for your fast response! Sorry for lack of info and thanks to your reply I found that I needed to back out of the CSS folder before going into the imgs folder! Sorry for wasting your time and I’m surpised I didn’t see that!
-baumy

1 Like