Can you change the part of an image that shows without having to manually crop it in Photoshop?

[core365]

Hi, I’m using an image on a page and the top of it is showing, but I’d like it to show from the bottom - I know you can change the display of a background image, but is there any CSS I can use so I can choose the point at where the image is shown? The image is of a church and it’s just showing the top if it at the minute and I’d prefer to see the bottom of it where the door is!

Also, I thought I’d cropped the image by putting max-height: 200px; but I’ve just noticed that the overflow of the image has just moved down into the section below it instead of just showing 200px of image and nothing else!

I’ll put the URL in a secure note as it’s on a temp link.

Thanks!

[jade]

HI there,

You can try to experiment with the value of the background size field for the section background and see what fits best for your image.

You can read more about the background size here:

https://www.w3schools.com/cssref/css3_pr_background-size.asp

Hope this helps.

[core365]

Hi, thanks, but it wasn’t a background image, it was an image element - that hasn’t got the ‘Size & Position’ options as far as I can see! I’ve uploaded a screen grab for your reference. I’ve already used CSS to fill the width and now with the max-height it’s stretched it out of proportion! I’d like, if possible, to be able to keep the image in its correct proportion and to set the amount in height of the picture to show and then to be able to set which part of the image is displayed - hope that makes sense!

Also, are you able to help with enlarging an image to fill the full height of a column with CSS? I’ve uploaded a screen grab for your reference. The URL is the same page as in my first post, but if you need it again, just let me know!

Thanks!

[basanta]

Hi @core365,

Thanks for updating the thread!
That eventually not possible through image element. You have to you have to use image background.
Otherwise, you can use CSS for positioning the image and hiding the extra part that you don’t want to show.

The best option is to use image background.

Hope this is clear.

[core365]

Hi, would you be able to let me know what the CSS would be please!

Thanks!

[basanta]

Hi @core365,

Actually, any custom CSS code is out of our theme support scope. We don’t support custom CSS code to our customer due to fact that there is no accountability of any kind of issue.

I will try my best to help you with this.

Please add this code to your Element CSS of the column where the image is.

$el{
overflow: hidden;
}
$el .x-image img {
 position: absolute;
 max-height: auto !important;
 top: 0px;
left: 0px;
}
@media (max-width: 978px) {
$el .x-image img {
 position: relative;
 max-height: auto !important;
}
}

This code will crop the image from bottom.
If you want to crop the image some part from the top, you can add negative value to top position.
Example

$el .x-image img {
 position: absolute;
 max-height: auto !important;
 top: -50px;
left: 0px;
}

Hope this helps!

[core365]

That is great, it worked, thank you! I really appreciate your help with that.

Are you able to help with any CSS to force an image to fill the height of a column?

Thanks!

[thai]

Hi There,

To force an image to fill the height of column, please add this element CSS:

$el img {
  height: 100%;
  width: auto;
}

Hope it helps

[core365]

Hi, thanks for that, however I wanted to keep the proportions without it looking stretched. Is there a way of achieving that?

Cheers

[rad]

Hi @core365,

It’s a bit buggy, simply because you’re only fixing it on your current view (like negative values) and different from other devices. How about this,

1. First, remove the already added CSS for this issue but make sure it’s backed up
2. Add your image as a background image of the column where your image is

3. In the customize section of your column, add this CSS to Element CSS.

@media ( max-width:979px ) {
$el > .x-bg {
    display: none;  
}
}

@media ( min-width: 980px ) {
  $el .x-image {
    display: none;  
  }
}

As a summary, you have both background and image element, but the visibility is controlled by CSS. The background will be displayed on the larger screen (cropped) while the actual image is displayed on mobile (full image).

Thanks!

[core365]

That’s brilliant, thank you! I really appreciate your time and help on this.

Thanks again!

[basanta]

Glad to know!

Thanks