I'm currently debating the best approach to take in this situation. Let's say I have a background image that I want to use on multiple pages, each with a different background image. The pages themselves must be responsive. Would it be better to go with inline CSS like this:
<div class="hero" style="background: url('../images/pagebg.jpg') no-repeat 50% 50% / cover;"></div>
Or should I use an external CSS file and do something like the following:
.hero {
height: 100%;
width: 100%;
position: relative;
top: 0px;
left: 0px;
display: block;
}
.hero-page1bg {
background: url('../images/pg1.jpg') no-repeat 50% 50% ;
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
}
Then in my HTML page, I would include:
<div class="hero .hero-page1bg"></div>
I am leaning towards the second approach because it allows for more flexibility when using media queries and assigning smaller file sizes for different devices compared to the first approach (inline CSS). However, I have noticed many responsive websites using the first approach (inline CSS) and calling the same background file for all devices, which can result in large file sizes being downloaded by mobile devices.
If managing a site via CMS, inline CSS seems like a logical choice as it may be easier to implement changes than getting clients to modify the CSS file directly.
So, what is the right approach? Inline or external CSS? With or without CMS? How would you proceed?
Thank you in advance! Cheers.