Stop featured image from cropping to height 188px?

[ElinH]

I’m making a new site where I’m using posts featured images as backgrounds for divs in a “recent posts”-area that I’ve coded myself. The divs are repsonsive widths and static heights but end up around width 360px (the height is set to 250px). 

I’ve set the divs to have:

background-size: cover;

The thing is though that Weaver theme crops my featured images to a height of 188px (the header image default height, changing the “suggested height” does not change this) – no matter the original size of the image. This results in the images that appear as backgrounds have such a small height that they only show a corner of the image as backgrounds in the divs.

I’m not going to use the “featured image replaces header image”-function at all on this site so this is really bugging me right now and I can’t figure at an easy way to solve this issue? Is there somewhere I can turn this function off without going to the functions.php? Or some other way to stop the theme from auto-cropping my featured images?

I’m not super high on php-coding. I’m using a child-theme so I can add a change to my child-themes functions.php-file but I don’t want to mess everything up so I would like some guidance to how to do that if that is indeed the only way.

http://u3350014.fsdata.se/ – this is the site I’m working on.

[scrambler]

I don’t think the theme is doing anything to your background image, your CSS appears to be.

On the first post, you are using the inlne css below

background-position: 0% 0%, 0% 0%; background-image: linear-gradient(rgba(0, 153, 153, 0.7), rgba(153, 214, 214, 0.7)), url(“http://i1.wp.com/u3350014.fsdata.se/wp-content/uploads/2015/12/they-are-coming-e1449438745242.jpg?resize=300%2C188“); background-attachment: scroll, scroll; background-repeat: repeat, no-repeat; background-size: cover; background-origin: padding-box, padding-box; background-clip: border-box, border-box; background-color: transparent;

The image used for the background http://i1.wp.com/u3350014.fsdata.se/wp-content/uploads/2015/12/they-are-coming-e1449438745242.jpg  is not cropped

If instead I just use

background-image:url(http://i1.wp.com/u3350014.fsdata.se/wp-content/uploads/2015/12/they-are-coming-e1449438745242.jpg); background-repeat: repeat, no-repeat; background-size: cover;

Then there is no vertical cropping, except from the normal cropping at the bottom because the post area does not have the same ratio as the image.

• I am not sure why your CSS is not working quite right, But you need to explore that first. Start with the minimum rules (above) and add others one at a time.
• You may want to create the shade in the image in an image editor to avoid the gradient rule, as it is likely not supported by all browsers

Three remarks.

1- When using background:cover you guarantee the whole box will be covered by the image, but of course if the box ratio is different from the image ratio, some cropping will occur, either on the sides or top/bottom

2- Using a fixed height makes your design non responsive. If you shrink the browser, at one point the content will flow out of the boxes.
You can either use a min-height instead, at least when the content needs more space the box will grow, but they wont all have the same height
Or you can add overflow:auto, so that if the content does not fit, a scroll bar will appear.

3- If this is a new site, you may have considered using the new Weaver Xtreme, as Weaver II pro is now end of life, so the sooner you transition, the better 🙂

[ElinH]

Okey, thanks for the answer. The inline css is being generated by the php-codes I used for creating the boxes. It’s something with how I’m calling the thumbnails. I’ll explore it further. 

1. Yeah that’s not a problem for me. I just want as much of as possible of the image to show and not just the top corner 😉

2. I know I’m going to do something about that. I haven’t desided what just yet. It’s important for me that the boxes are always the same height for the symmetri of the design 🙂

3. Right.. I’m going to look into that right away. 

[Author]

Posts