Locating background image settings for page in Pro editor

Support
#1

Hi, I’ve been working on a header template for my front page and struggling to find how to alter the default background image. There are lots of ways of putting a block colour, image or texture over the top, which is nice, but I can’t find how to alter what’s ultimately underneath. What I’m looking for is to set that, once in one place, then have most of the overlaying element/section backgrounds as transparent.

The default image in question and where it appears is:

<header class="x-masthead" role="banner">
...
    <div class="e81-9 x-bar x-bar-top x-bar-h x-bar-relative x-bar-outer-spacers" data-x-bar="{&quot;id&quot;:&quot;e81-9&quot;,&quot;region&quot;:&quot;top&quot;,&quot;height&quot;:&quot;auto&quot;}">
        <div class="x-bg" aria-hidden="true" data-x-element="bg">
              <div class="x-bg-layer-lower-image" style=" background-image: url(https://themeco-templates.s3.amazonaws.com/assets/bg-poly.png); ...

i.e. I need to find where in the Pro editor or site customizer bg-poly.png is set, so that I can change it. Can you please help with that?

Thanks

#2

Hi Joe,

Yes, thank you for writing in, that is a Bar’s Lower Layer Background


Navigate to Pro > Headers edit your header, inspect the Bar (from the looks of your code its seems to be the first bar on your header)

If you do not see this options on your end, please navigate to PRO > Settings > User Preferences and set the Advance Mode to Always On



Hope it helps,
Cheers!

#3

Thanks. Unfortunately this isn’t working as a solution. When I choose an image or colour for Bar 1 background, in the way you indicate, I can set the background for that area when I choose a non-transparent value, but when I choose a totally transparent background as colour, it’s not transparent, instead it shows the default bg-poly.png and a dark blue colour as the tint. How do I remove that default so whatever is underneath, e.g. body colour shows through? Where is that dark blue and bg-poly.png actually set and configured in Pro, so that I can get rid of it?This is all I want.

#4

OK, it was actually bar 2, which was completely filled with container 1, so impossible to select in the usual way to edit, i.e. no outside id in the preview. was able to select it using the breadcrumb for container 1 though and edit from there, successfully removing the bg-poly.png and colour.

maybe a double click in the layout view or a ‘edit’ button there would be helpful, for when one element completely fills another, so preventing the parent from being selectable?

#5

Hi Joe,

Glad you sorted things out, I’m not sure if I understand what you mean by “completely filled with container 1”, but if you need quick access to your elements you can enable the Skeleton Mode feature

Cheers!

#6

Thanks.

I meant, if you have one element container that takes up the full space of its parent container, then the parent outline isn’t visible to be able to select and edit in the same way the child container outline is (the green border with the container name on it, that you click to edit).

The skeleton view helps, thanks.

#7

Hi Joe,

I’m glad you found the skeleton mode helpful. I assume everything’s sorted out now, correct?

#8

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