I had been working on a concept for a slideshow or single-page website and reached a good stopping point. Since I had outlined my idea on a JSFIDDLE, I decided to tidy up my CSS. Each of the 5 tabs used similar lines of CSS except for the background image.
Initially, this is how the CSS looked in the (working) version - -fiddle-
#p-home {
background: url("http://upload.wikimedia.org/wikipedia/commons/e/e5/Neuschwanstein_Castle_LOC_print.jpg") no-repeat;
background-size: cover;
background-position: center center;
}
#p-about {
background: url("http://upload.wikimedia.org/wikipedia/commons/4/4d/Balmoral_Castle.jpg") no-repeat;
background-size: cover;
background-position: center center;
}
The code was a bit messy, so I decided to simplify it like this instead - -fiddle-
#p-home, #p-about, #p-work, #p-contact, #p-blog {
background-size: cover;
background-position: center center;
}
#p-home {
background: url("http://upload.wikimedia.org/wikipedia/commons/e/e5/Neuschwanstein_Castle_LOC_print.jpg") no-repeat;
}
#p-about {
background: url("http://upload.wikimedia.org/wikipedia/commons/4/4d/Balmoral_Castle.jpg") no-repeat;
}
Through this modification,
#p-home, #p-about, #p-work, #p-contact, #p-blog {
background-size: cover;
background-position: center center;
}
the divs were not using those two CSS lines. However, when inspecting the console, it flagged them as an invalid property value.
Any suggestions?