Problem with background image scaling

hi everyone.

 

i wonder if can image scaling issue. working on site, based on template being modified. old school print designer, 0 web experience - having baptism of fire in creating site client!!

 

the basis of website working well. have 2 issues - both issues relate responsive problem - site works in desktop format, if @ site tablet or smartphone, image problems kick-start.

 

the first 1 background image problem. site opens pre-loader , has cover image @ top of one-page scrolling site. cover image essentially  background image, @ top of site. on desktop, works fine - viewed on tablet or smartphone, seems have extreme zoom in on image, rather opposite effect need, scale down image can seen in full on either device.

 

i don't know code post here - have css code, , can paste in html source code, pretty wet behind ears stuff - apologise if putting wrong information needed - can steer me in right directly, in plain english!!!

 

the css is:-

 

/* start page */

 

 

.start-page{

  position:relative;

  width:100%;

  height:100%;

  z-index:10;

  background:url('../img/background/start-page.jpg') #000000 bottom center fixed no-repeat;

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

 

i can't see appropriate html - maybe there general answer can help.

 

the second problem carousel image slider. using owl carousel, which, above, works in desktop, in tablet or smartphone, doesn't reduce image scale fit in screen device.

 

the html can see follows:-

 

 

      <section class="section background-dark">

        <div class="line">

          <div class="carousel-fade-transition owl-carousel carousel-main carousel-nav-white carousel-wide-arrows">

            <div class="item">

              <div class="s-12 center">

                <center><img src="img/01-boxed.jpg" alt="" width="100%">

                <div class="carousel-content">

                  <div class="padding-2x">

                    <div class="s-12 m-12 l-8">

                      <p class="text-white text-s-size-20 text-m-size-40 text-l-size-60 margin-bottom-40 text-thin text-line-height-1"></p>

                      <p class="text-white text-size-16 margin-bottom-40"></p> 

                    </div>                 

                  </div>

 

as css - there ton of it, relating owl carousel - experience of can - @ loss need make simple (hopefully) fix.

 

many everyone, forward hearing , if need me post specific info, ask!!

 

many thanks,

richard

 

ps: using dreamweaver cs5

hello richard,

 

in hope understood correctly: part use tasks these

jquery easy background resize plug-in

i quote: jquery easy background resize plugin intended allow background image dynamically resize size of browser keeping images aspect ratio in tact. resizable full-browser background image using jquery. implementation requires no css.

 

hans-günter

More discussions in Dreamweaver support forum

adobe