WordPress：每个<section>的动态背景图像

Question

I'm creating a page with 5 <section>s of content, each 720px in height. I would like to have 5 different background images (i.e. one for each section), as well as the ability to change the image for a given section via WordPress administration.

I'm using CSS to set the background image for each section, e.g.:

.section-1 {
    position: relative;
    background: url("images/section-1-bg.jpg") no-repeat;
    background-size: cover;
    height: 720px;
}

I've looked at countless plugins and examples, but have yet to find anything remotely resembling to what I'm trying to do. I've also read the WordPress Codex exhaustively, searching for answers to what I consider a very basic requirement.

Can someone please point me in the right direction on how to modularize my code and create a small plugin to upload/select new background images for when I decide I want to change a given section?

Answer 1

You could add the image inline and then use advanced custom fields or something similar to add the image via the administration, like this:

<section class="section-1"
style="background-image:url('<?php the_field('field_name'); ?>');">
</section>

Hope it helps!