Elementor – Background image top position

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,

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,

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 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