Problem with background image scaling
Hi Everyone.
I wonder if anyone can help with another image scaling issue. I am working on a site, based on a template which is being modified. I am an old school print designer, with zero web experience - but having a baptism of fire in creating a site for a client!!
The basis of this website is working well. But I have two issues - both issues relate to a responsive problem - the site works well in desktop format, but if I look at the site from a tablet or a smartphone, the image problems kick-start.
The first one is a background image problem. The site opens with a pre-loader and then has a cover image at the top of a one-page scrolling site. This cover image is essentially a background image, but only at the top of the site. On a desktop, it works fine - but viewed on a tablet or smartphone, it seems to have an extreme zoom in on the image, rather than the opposite effect I need, which is to scale down the image so it can be seen in full on either device.
I don't know what code to post here - I have some CSS code, and I can paste in the HTML source code, I am pretty wet behind the ears with this stuff - so I apologise if I am putting up the wrong information needed - but hopefully someone can steer me in the right directly, in fairly 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 what could be the appropriate HTML - but maybe there is a general answer that can help.
The second problem is a carousel image slider. I am using Owl Carousel, which, as above, works perfectly in desktop, but in tablet or smartphone, it doesn't reduce the image scale to fit in the screen device.
The HTML I can see for this is as 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 for CSS - there is a ton of it, relating to Owl Carousel - so hopefully someone with experience of this can help - I am at a loss for what I need to do to make this fairly simple (hopefully) fix.
Many thanks everyone, I look forward to hearing from you and if you need me to post any specific info, just ask!!
Many thanks,
Richard
PS: I am using Dreamweaver CS5
AdChoices