JSFiddle - React, Tailwind, and code Playground

by gionaf

HTML

<div id="sky">
<img src="http://www.mendipmedia.co.uk/blog/wp-content/uploads/2012/05/sun.png" id="sun">
</div>

CSS

#sky {
    width:100%; /* width in percentage, so it will adapt to user's screen */
    height:600px; /* here i've set a fixed height, but maybe it's not what you want */
    background:url(http://freeimagesarchive.com/data/media/29/14_sky.jpg) top center no-repeat;
    text-align:center; /* #sun will be centered, not sure it's what you need */
    background-size:cover;
    -moz-background-size:cover;
}
#sun {
    width:15%; /* adjust it to the needed ratio */
    max-width:600px; /* max-width will prevent it from being bigger than the original image */
    min-width:20px; /* min-width is optional */
}