Question posted in 
I’m using Free Code Camp to learn, and a few days ago got to the Portfolio Project. I’ve made some great progress and have learned quite a bit, but I’m stuck on one pretty important bit. My background images keep disappearing. They disappear at random times. I can temporarily fix it by rewriting the code (not just copy/pasting the code), but it always ends up happening again.
If you folks wouldn’t mind, please look over my code. For quick find, search for aboutpage and portfoliopage (in HTML and CSS) to see the specific instances I’m talking about. Of course, maybe some other aspects of the code are borking it. This has been happening since before I added any JavaScript.
HTML
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!--<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script> -->
<title>David Clark | Portfolio</title>
</head>
<!--<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">David Clark</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="active">
<a href="#">About</a>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</nav>-->
<body data-spy="scroll" data-target=".navbar" data-offset="0">
<nav id="mainnavbar" class="navbar navbar-default navbar-fixed-top" roll="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="aboutpage">David Clark</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="active">
<a href="#aboutpage">About</a>
</li>
<li>
<a href="#portfoliopage">Portfolio</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div id="aboutpage">
<article>
<div class="block text-center">
<img class="portrait" src="https://avatars0.githubusercontent.com/u/15970036?v=3&s=460">
<h1>david clark</h1>
<div class="btnList">
<a class="btn btn-social-icon btn-bootstrap" href="https://twitter.com/daviddoes___">
<span class="fa fa-twitter"></span>
</a>
<a class="btn btn-social-icon btn-bootstrap" href="https://github.com/SlouchingToast">
<span class="fa fa-github"></span>
</a>
<a class="btn btn-social-icon btn-bootstrap" href="https://www.linkedin.com/in/creativedavid">
<span class="fa fa-linkedin"></span>
</a>
</div>
</article>
</div>
</div>
<div id="portfoliopage">
<article>
<div class="portblock">
<h1>Hello!</h1>
</article>
</div>
</div>
</body>
</html>
CSS
.navbar-nav{
font-family:'Open Sans Condensed', sans-serif;
font-size: 2.0em;
}
.navbar-brand{
font-family:'Open Sans Condensed', sans-serif;
font-size:2.0em;
}
body{
font-family:'Open Sans Condensed', sans-serif;
color:white;
margin:0;
padding:0;
}
h1{
padding: 0;
margin-top: -1%;
text-align: center;
color:rgb(54,54,54);
font-size: 80px;
text-decoration: underline;
}
.btn:hover{
color:#FEEE8B;
}
.btn{
align-text: center;
margin-bottom:3%;
margin-right:5px;
margin-left:5px;
border-radius: 0 !important;
font-size:20px;
color:rgb(54,54,54);
}
article{
padding-bottom:10px;
}
.block{
background-color:rgba(157,178,197,.6);
opacity:1;
width:50%;
height:12%;
margin-right:auto;
margin-left:auto;
margin-top:10%;
object-border:10px;
}
.portblock{
text-align:right;
background-color:rgba(157,178,197,.6);
opacity:1;
width:50%;
height:12%;
margin-top:10%;
object-border:10px;
margin-left:auto;
}
.portrait{
width:40%;
height:auto;
border-radius:50%;
margin-bottom:3%;
margin-top:3%;
opacity:.9;
}
#aboutpage{
background-image:url(https://crossorigin.me/http://i.imgur.com/Qt3kOoF.jpg);
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:800px;
padding: 1px;
}
#portfoliopage{
background-image:url(https://crossorigin.me/http://i.imgur.com/IYXAg7k.jpg);
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:800px;
padding: 1px;
}
JavaScript
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
Thanks so much!
4
Answers
SOLVED
The issue was with the image host (imgur). Instead, I uploaded the photos to my Dropbox.
Have you tried wrapping your background-image: url() value in quotes?
Like so: background-image: url(‘https://crossorigin.me/http://i.imgur.com/Qt3kOoF.jpg‘);
So looking at it in chrome I noticed an net::ERR_SPDY_PROTOCOL_ERROR which is kind of a “we don’t know” error from chrome relating to images.
Opening it in Firebug is says “Image corrupt or truncated”.
Host your image someplace else if you can and that should probably fix it. Something about how they’re set up now is causing them to be blocked by the browsers.
You can try using the
!importantsyntax, it should work fine.example :
background: url(/img/debut_dark.png) !important;