Elementor – Background image top position

[Oceanglim]

Hello!

I am now getting to know Elementor….and trying things, which is fun.
But I can’t position my background image at the top.

How do I do that?

I have set  Layot > Content Position > Top.

I have set Style > Positon > Top Center

Please take a look at my settings!

Greatful for help! / Oceanglim

Attachments:

You must be logged in to view attached files.

[Kieran_SQ]

Hello,

You can set the position of a background image by editing the row that contains the image, select the style tab at the top of the left panel, scroll to where the image is that you’re using the background image and select your desired position from the drop down below the image titled ‘Position’ (see screenshot).

If you’d like me to do this for you on your site just let me know and I will be happy to login.

All the best,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

Attachments:

You must be logged in to view attached files.

[Kieran_SQ]

Hi,

I am sorry it looks like I missed half of your question. I checked the page in question and I can see that the image is aligned top center as per your settings and that the correct CSS has been output (see screenshot).

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

Attachments:

You must be logged in to view attached files.

[Oceanglim]

Hello again and thanks for your replies!

I then realized that I had been editing in Elementor default homepage instead of the original homepage. So now I am trying to edit my original homepage with Elementor, but I can’t even see any editing box around the background image even though I click it.

And also I can’t make the text centered even though I click the center icon. It switches back to left position. I have deactivated both Pagebuilder and other layout-plugins I used before.

So my question is: Am I supposed to rebuild my homepage at the Elementor default page?? Or should it work to just rebuild my own homepage?

Another question:
Before the background image on frontpage wasn’t responsive for smartphones.
What about today with Elementor?

If not, is there a way to have a top image on startpage that will show on smartphones?

[Kieran_SQ]

Hi,

Is it okay if I switch the account you provided into English US? If not, please could you create a new account (using English US or UK) and share the login details here privately.

Secondly, could you please let me know exactly which page it is you’re editing where you’re having the issues?

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[Oceanglim]

This reply has been set as private.

[Kieran_SQ]

Hi,

Because there will be a lot to cover in my reply I am going to break each point down into numbers for ease of tracking going forward.

1. “Home Default — Elementor” the background image that appears at the top of the page is aligned top center. You have the row of content within set to full width with little padding around it therefore it makes the area very narrow causing the image to look a little off. Check the attached images “Home Default – Wide” and “Hoem Default – Narrower” for an example of how resizing the browser changes the view of this area and that the CSS is rendered on the front-end.

You can resolve some of the issue by making the inner content not full width, see screenshot “Home Default – Switch to boxed not fullwidth”. Also you can add padding top and bottom to the row to extend the height which will give more of an effect of aligned top-center, you can use this in conjunction with full width or not – it’s your choice, see screenshot “Home Default – Add padding to row”.

2. “Search form / Register Form” the form is there but is not rendered as it is set for logged out users. Check the attached screenshot titled “Home Default – Register Form” for how to edit this. Hover over each form and click the pencil icon to select whether or not to show to logged in or logged out users.

3. “Hem – Startsida” I cannot see how this element is rendered, it does not appear to be an element of Elementor. How did you add it?

4. “Cannot center my text” you’re using a shortcode kleo_h1 which is not required. You should removed all instances of this and select H1 from the dropdown instead of paragraph after highlight the text you wish to appear as a H1 title, see screenshot titled “Text Rendering – H1”.

I have changed this for you already, see screenshot titled “Text Render – Alt”, this should resolve the issue for you in this section but you will need to replace kleo_h1 with the correct H1 as per above.

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

Attachments:

You must be logged in to view attached files.

[Oceanglim]

This reply has been set as private.

[Kieran_SQ]

Hi Jenni,

If the page ‘Hem – Startsida, Elementor’ is pre SweetDate 3.0 I would advise that you use the other, working, page from the theme demo import ‘Home Default — Elementor’ and customize it to your needs.

Background images in Elementor are responsive and should scale as you adjust the browser size as well as rendering the correct image size for different devices.

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[Kieran_SQ]

Also, I noticed a minor issue on your site when building a page with Elementor. A 60px padding was added to the main content, I have added the below CSS to WP Admin > Appearance > Editor > SweetDate Child > Style.css to remove this extra padding on pages built with Elementor

COPY CODE

.full-builder {
    padding-top: 0px !important;
}

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[Author]

Posts