I was working on a slideshow/single page website idea and was at a good stopping point. Since I had the gist of my idea down on a JSFIDDLE I started to clean up my css
. On each of the 5 tabs they all use the same lines of css
besides the background image.
This is how I had the css, (working one) -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;
}
This was a little ugly to me so I figured I would clean this up and simplify it like so, -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;
}
By using this,
#p-home, #p-about, #p-work, #p-contact, #p-blog {
background-size: cover;
background-position: center center;
}
made the divs ignore those two lines of css
. I don't see anything wrong with my code and am not 100% sure why that css is not being used When I inspect the console it says it is an invalid property value.
Any ideas?