Flexslider DISABLE full-width display, auto adjusting

Question

I've just installed a blog template that includes a slider. The template comes from:

sight-soratemplates.blogspot.com

As you can see from the slider, the images are full page width, however the images I replace them with are about half the width, but instead of displaying the image as it is, it repeats them to cover the entire width of the page .

How can I change this? I'm a complete beginner at html coding. I would like the slider to adapt automatically for each image.

The html code for the slider, along with 1 image is:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='slider' style='overflow:hidden;'>
     <div class='fullwidth flexslider' id='homeslider'>
          <ul class='slides'>
               <li data-height='500' style='position:relative; background: url(http://x.jpg) 50% 0'>
                    <div class='caption_wrapper'>
                         <div class='caption'>
                              <h3><a href='#'>Random Title</a></h3>Random Caption<a href='#'>Read more </a>
                         </div>
                    </div>
               </li>

Answer 1

That's because the background image is indeed repeating itself. You can avoid this by adding no-repeat to all of your images.

For example, you have this:

element.style {
    background: url("https://lh3.googleusercontent.com/-X29Krwb_fbQ/UcMfaRJm_TI/AAAAAAAAB2Y/QaQkIwWMZ5c/s1600/9d.jpg") repeat scroll 50% 0 rgba(0, 0, 0, 0);

Change it to

element.style {
    background: url("https://lh3.googleusercontent.com/-X29Krwb_fbQ/UcMfaRJm_TI/AAAAAAAAB2Y/QaQkIwWMZ5c/s1600/9d.jpg") no-repeat scroll 50% 0 rgba(0, 0, 0, 0);

PS: your site is looking great.