Dynamic home page image in wordpress - php

Question

I'm building a website for a good friend of mine and i'm stuck on this one.
I want an adaptable background image on the homepage so he can customize it on the customize page in the wordpress admin page.
My code now looks like this:
get_header(); ?>
<div id="slides">
<div class="slides-container">
<img src="<?php bloginfo('template_directory'); ?>/images/Home.jpg" alt="Cinelli">
</div>
<nav class="slides-navigation">
<img src="<?php bloginfo('template_directory'); ?>/images/right.png" alt="left">
<img src="<?php bloginfo('template_directory'); ?>/images/left.png"alt="right">
</nav>
</div>
<div class="welcometext">
<h1><?php echo get_bloginfo( 'name' );?></h1>
<?php echo bloginfo('description');?>
</div>
<?php get_footer(); ?>
now the image tag needs to be adaptable.
Is this possible?

Answer 1

It may be easier to pull the image from a WordPress Page's Featured Image than to use the Customize page.
To enable Featured Images, add this line to your theme's functions.php file: add_theme_support( 'post-thumbnails' );
Now upload an image to the Featured Image area of a WordPress page. This can be any page, you just need to take note of the Page's ID. To get the Page ID, go to the edit screen for the Page and look at the URL in your browser. It will end with something like post.php?post=34&action=edit where the number after post= is the Page's ID, in this example it's 34.
Now modify your image code:
<?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id(34, 'full') ); // replace '34' with your Page's ID ?>
<img src="<?php echo $feat_image; ?>" alt="Cinelli">
Replace 34 with your Page's ID. If you are using this code within the Loop, you can replace 34 with $post->ID.
The 'full' in the first line tells it which size of the image to use. 'Full' will use the original image you upload, or you can use 'large', 'medium', 'thumbnail', or any custom image size you've set up.