Skip to main content

I have a page with two widgets in a row. The background image I upload for one of the widgets, no matter the size of the image (I’ve tried anything from 700px width to 300px), always looks the same in desktop preview.

Is there a way to manipulate this or is there a recommended dimension for widget backgrounds?

I was thinking about the background-size: cover; css code but when I try it in chrome inspect, it doesn’t impact the image size.

@msiegel what kind of widget is it? Custom content box widgets use the background-size:cover; property by default and the height will be dependent upon the content you add to the widget. Image widgets use the background-size: contain; property by default and should always show the entire image.

I use the Google Chrome app pixel zoomer extention. 

https://chrome.google.com/webstore/detail/pixelzoomer/fogkjckfkdcnmnnfmbieljpkmmihhpao

This always me to design my page, and then measure the widget sizes before creating images to fit the widgets as I’d like.  After dragging the box around the area I’m attempting to measure, it provides me the resolution.  I create the image in that resolution, and set the minimum height accordingly.

 

That is cool! Don’t forget the color tool...that’s worth it alone!

@msiegel what kind of widget is it? Custom content box widgets use the background-size:cover; property by default and the height will be dependent upon the content you add to the widget. Image widgets use the background-size: contain; property by default and should always show the entire image.

Yeah, it’s a custom content box. The image I tried in different sizes and it just seems to stretch it regardless of the image size I import. I guess I thought the cover option would react differently based on the image size.

Reply


Terms & ConditionsCookie settings