Full width slider - images blurring

Design help General
1

Hi everyone.

Hoping someone can help.

I am trying to fix up this site: http://barberonabike.webflow.com/home2 for a friend and using webflow.

I am trying to get a full width slider and for the images to scale properly on large screens.

I need it to be 100% width at all times and have inserted images which are 1300px wide in order to stop blurring but even when i make max height of 315px (the height of the PNG image) the image stretches and becomes blurry and ugly.

Even on smaller laptop screens it looks squashed. I tried to put a slide background colour of the same colour as each background but this did not work as colours seemed to look different on every screen despite matching the exact colour and background colour from photoshop.

1412×704 152 KB

2

Hi @Chris_Reeves, one thing I would try, is too scale your original images to 1920px wide instead of 1300, that should help your images going blurry when stretched. Keep in mind if you are using the images as a background for the slide, then you need to set the image to Contain if you want to keep the original aspect ratio for the images when the slider is resized.

If you set the Background image for the slider to Cover, you can achieve the 100% height and width, but this also uses then the fixed image dimensions for the background image, and when the slider is resized, then the background image will not resize below it’s original dimensions. For that reason, if you want your background image for slider, that you use the Contain option in the Background image properties, and then the image will always maintain it’s aspect ratio and the entire background image will be visible at all times. If you use the Cover option the image will get cropped.

I hope that helps. Cheers, Dave

3

Hi Dave,

Yes that helps. Unfortunately i want the images to be impactful so setting them to 1900px wide and letting them scale will mean the text is very small on smaller devices which isn’t ideal.

I have decided to make desktop and mobile versions of each. However I am getting an issue that when they are not 100% wide I am trying to set up the colour to be the same as the image and it is always slightly out. Any idea why?

Thanks
Chris

4

Hi @chris, on the small text issue, one thing you might try, is to use a background image for the slider, and then keep the text separate, as their own Paragraph and/or Heading elements, and inserted to the slide. That way, you can adjust the size of the text for each mobile viewport separately from your background image.

On getting the color of the image and slider mask to be the same, you might try using an eyedropper tool, to get the hex value of your background image, and then use that color in your Slides as background.

I did this on your site, and these are the hex color values from your image:

#8CC3CF  -- blue image
#E52A2B  -- Red image background

Try those colors to see if they work better for you.

I hope that helps. Cheers, Dave

5

Hi Dave,

I tried the Hex images and they seem to differ for some bizzare reason. I have now resorted to a 1900 wide image and a 500px wide one for mobile. Its not a big issue and makes the experience much better.

Will post once the site is finished.

Thanks
Chris

6

hi @Chris_Reeves, yeah on the colors, I think it might be due to a slightly different color palette used in the image vs the palette used by the browser/os. I found this article, it might be of some use, I am not sure, but you can check this out, maybe it will help.

http://hints.macworld.com/article.php?story=20110130030105874

Cheers!