javascript - Flexslider DISABLE full-width display, auto adjusting -
i've installed blog template includes slider. template comes from:
sight-soratemplates.blogspot.com
as can see slider, images full page width, images replace them half width, instead of displaying image is, repeats them cover entire width of page .
how can change this? i'm complete beginner @ html coding. slider adapt automatically each image.
the html code slider, along 1 image is:
<b:if cond='data:blog.pagetype == "index"'> <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>
that's because background image
indeed repeating itself. can avoid adding no-repeat
of images.
for example, 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
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: site looking great.
Comments
Post a Comment