Can you change the position of an image as you can with a background image?

Support
#1

Hi, I’ve done a website and used background images with a parallax effect, but I’m having to replace the background images with images so we can add alt text to each one. I’m trying to recreate them as close as I can to the background images with the size and positioning etc. I’ve done 1 image to begin with and have made the width 140%. By doing this though, the image is now off centre. With a background image you can specify the position and change it accordingly with percentages, eg 30% 40%. I’ve tried to do this with the image, but can’t find out the correct CSS to do so! I’m hoping you can help!

Also, I’d like to change the height of the image, can you let me know what I need to put for the CSS for this also please.

The first image I’ve tried to recreate is on the Home page, under the text ‘Core Meaning’. The first image is the background image and the one under that is the image and you’ll see it is off centre to the right!

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

Here’s the pic I’m trying to position:

Thanks!

#2

Hi @core365,

Thank you for writing in, if you need to go to that route, please keep in mind that you won’t able to recreate the parallax effect with the image, then you need to crop the image as a PNG and no background-color and extra space on it. You can apply the background-color on the section, and then with just the PNG image, then you can position it with the text-align option of the column.

Cheers!

#3

Hi, sorry, I have no idea what you mean by applying a background color to the image! It already has its own background colour and it’s a jpeg, not a transparent png file. I want to keep the image as it is, but just move the focus of it! I’ve set the width as 140%, so I need to reposition the focus of the image, as instead of being centred within the column, it’s too far over to the right.

I’d then like to set the height of the row/column, so it’s not showing the full height of the image.

Thanks

#4

Hi @core365,

Thank you for the clarification. The answer to your question is [background position] (https://www.w3schools.com/cssref/pr_background-position.asp) and background size. We can definitely set the X and Y position of the background image. Please the link provided and look at this screencast: https://screencast-o-matic.com/watch/cYVuIEwn3k

Hope this helps.

#5

Hi, thanks for doing the screencast, however I already know how to position the background image! I think there’s some confusion here! This is what I put in my first post:

I’m having to replace the background images with images so we can add alt text to each one. I’m trying to recreate them as close as I can to the background images with the size and positioning etc. I’ve done 1 image to begin with and have made the width 140%. By doing this though, the image is now off centre. With a background image you can specify the position and change it accordingly with percentages, eg 30% 40%. I’ve tried to do this with the image, but can’t find out the correct CSS to do so! I’m hoping you can help!

Also, I’d like to change the height of the image, can you let me know what I need to put for the CSS for this also please.

So, just to clarify, I currently have used background images, but I’m having to replace the background images with the image element so I can add alt tags to each image as you can’t do this with background images. I’ve enlarged the image width to 140%, but in doing this the main focus of the image (the brochure) is now too far over to the right and I want to bring it back into the centre and wanted to know if there is any CSS which will work similar to how you change the X and Y axis for a background image. I hope that has made things clearer!

Thanks!

#6

Hi @core365,

We’re sorry for the misunderstanding and thank you for the clarification.
It is not recommended to increase the image width to 140% because it will be stretch and will affect the quality.

Now, if you want to proceed with it, technically, we can use MARGIN settings to move an image from it’s current location. But margin take note of the container so this is not recommended to your preferred setup. The only way is, set the image position as absolute. Then you need to add a GAP element. You will control the size of the container by setting GAP size. Then let’s use absolute positioning for the image element. See this: https://screencast-o-matic.com/watch/cYVU1UweNO
You might need to use different GAP element per screen size to accomodate image size.

Hope this helps.

#7

Hi @Lely,

Ah, that’s great, it works with the margin settings, thanks!

One other thing, when I view it on a mobile, I’d like the image to be bigger, is there a way using CSS to do this? I’ve tried to do it myself but it doesn’t work!

Thanks again for your help and time!

#8

Hello @core365,

Based from page element css selectors, you may use this custom css:

@media(max-width: 767px){
  .responsive-image-size-165 .x-bg .x-bg-layer-lower-image{
    background-size: 190% !important;
  }
}

We would love to know if this has worked for you. Thank you.

#9

Hi, thanks for the CSS code, but it’s not the background image I’d like to make bigger in a mobile, it’s the image I’ve used in the Image Element section that’s under the background image section - hope that makes sense!

I’ve got a new URL for it and I’ve added in some notes on the page which hope will help! I’ll put the URL in a secure note as it’s on a temp page.

Thanks!

#10

Hey @core365,

You can increase the width of an image and then use the margins to set it’s position in smaller screens, to do this, add the following code in the Theme Options > CSS:

@media screen and (max-width: 767px) {
    .image-position {
        width: 200% !important;
        margin: 0px 0px 0px -50% !important;
    }
}

Adjust the values as you need. Hope this helps!

#11

Hi @Nabeel,

That’s exactly what I wanted, thanks!

Now that the image is enlarged on a mobile the height is quite tall too, is there a way of reducing the height of the column so in effect it crops the image without changing the size of the image?

Thanks!

#12

Hi @core365,

Please try add this code to the Element CSS of the column in question:

@media screen and (max-width: 767px) {
    $el.x-col {
         max-height: 300px;
         overflow: hidden;
    }
}

Hope this helps.

#13

Hi @Jade,

That’s perfect! Thank you so much!

I really appreciate your time and help with all of my questions!

Thanks again!

#14

You’re welcome. Glad we’re able to help.

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.