Problem with background image scaling

Report · Dec 02, 2016

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:-

</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

Report · Dec 03, 2016

Hello Richard,

in the hope I understood you correctly: I for my part use for tasks like these

jQuery Easy Background Resize Plug-In

I quote: The jQuery Easy Background Resize plugin is intended to easily allow a background image to dynamically resize itself to the size of the browser keeping the images aspect ratio in tact. Resizable full-browser background image using jQuery. Implementation requires no CSS.

Hans-Günter

Report · Dec 03, 2016

Does your document have a viewport meta tag?

Can you put your work online and post the URL?

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Dec 04, 2016

richardc73459361 wrote:
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;

Looks to me like you need to add the background position property otherwise the image will just be stuck to the top left and in mobile devices will appear to be cut off on the right hand side.

background-position: center center;

You obviously have to take into account that mobile devices are generally long skinny screens when held portrait so you may feel it more appropriate to use a longer skinner image if your image, which works perfectly ok for desktop, doesnt make much sense on mobile devices - a lot almost become an abstract picture.

You would do this by swapping the background image specifically for mobile devices using a css media query:

@media (max-width: 768px) {

.start-page {

background-image: url('image_for_mobile_screens.jpg');

}