For some strange reason, everything on my site is working but the background-image for my div.hero will not display. Here's my HTML.
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="assets/css/all.css"/>
<link rel="icon" type="image/png" href="assets/img/favicon.png"/>
</head>
<body>
<header>
<?php include_once('header.php'); ?>
</header>
<main>
<section>
<div class="hero">
<h1>My Awesome Site</h1>
</div>
</section>
</main>
<footer>
<?php include_once('footer.php'); ?>
</footer>
</body>
</html>
Here's my CSS
html, body, main, section {
height: 100%;
margin: 0;
}
.hero {
position: relative;
height: 100%;
background: url(../img/baby-room.jpg) no-repeat fixed center;
background-size: cover;
}
Lastly, my file structure found in Applications/XAMPP/xamppfiles/htdocs/:
root/
index.php
assets/
css/
all.css
img/
baby-room.jpg
favicon.png
header.php
footer.php
Here's the real nutty part. If I just add rgba(0,0,0,0.5) in front my url(../img/baby-room.jpg) I get a half transparent black background, as I should. This really makes me think it's a path issue. The path looks solid, but when I open the path in a separate window I get an 403 Access Forbidden screen.
I cannot for the life of me figure out what's happening. At first I thought it was XAMPP issues but then I uploaded it live and it still didn't work. I've tried single quotes and double quotes, different browser, to no avail. Any ideas?
Because the root folder is contained inside the XAMPP folder, the XAMPP user needs to have access to the files on the computer. The XAMPP default user is
daemon. If you're getting that 403 Access Forbidden message it's becausedaemondoesn't have access to the files. Change the XAMPP user to your computer's admin user by opening/Applications/XAMPP/xamppfiles/etc/httpd.confin your text editor of choice. Find the block that saysAnd change it to:
Where yourUserNameHere is actually your username used when you do things like uninstall applications and such. It's usually found on the left side of your finder window with a home icon next to it.
Then save, restart XAMPP, then reload the page. Background images should now load with no problem.