I am surprised tghat SPPG does not have the option to set image size
All we can set is physical size. I've run into a a problem when resizing browser
The image size is default and fill correclty when viewing standard browser width. The button is set to full width which is what I want.
See home page and resize brwoser width to see what I am referrring too
https://test.2bpdesign.com
How do I set iamge size to either fill or by percentage?
Image Overlay No Animation Custom CSS
.overlay-background-image,
.image-effect-zoom-in .overlay-image-title::before
{ transition: none; transform: none; }
.image-effect-zoom-out .overlay-image-title::before {
-webkit-transform:scale(0);
transform:scale(0);
-webkit-transform-origin:0 0;
transform-origin:0 0;
-webkit-transition:none;
transition:none;}
.title-subtitle-bottom-left .sppb-addon-subtitle,
.title-subtitle-center-left .sppb-addon-subtitle {
transform: none;
transition: none;}
.image-effect-slide-right:hover .overlay-background-image,
.image-effect-zoom-in:hover .overlay-background-image,
.image-effect-zoom-out .overlay-background-image,
.image-effect-zoom-out:hover .overlay-background-image
{ transform:none; }
Hi Scott,
Image addon is classic < img HTML tag - so it never had those values.
But you can use image as background for any Addon or Row, then you can set Image background size (in HTML called CSS background-size Property):
BTW
Anytime you can use Custom CSS to modify any image you want also by using CSS @media - media queries to apply different styles for different media types/devices - also basic CSS.
In general for your Slideshow bg images you should use images that are 1920x600px - then it should look much better on laptop screen.
But I am guessing about what images/addon you are talking.
Removed teh main image and set background image using the SPPB default image. Set custom width to 100 but have no height and becuase I did not use an main image the missing image symbol is visible
What am I doing wrong
Set the hieght in main setting to 255px that worked. However if I set the image to Contained and run into the same issue on browser resize. The only option is "Cover" but that crops image when browser is resized not suitable for display product images
it is odd the SPPB Devlopers did expand on main image tools but allocated those tools to background image. Does not make sense
Still have the problem of missing image icon.
The second Product Vertical Change in Level I used "Image Overly Add-on" and is works better than background iamge only.
Animation would be nice to have an option to set no animation. What would be custom css to disable the zoom effect I am using now
Thank you Paul, that resolved it.