Still searching for dashboard colour adjustment on this part

[Trying_to_learn]

Ok, sorry folks, but here is today's dumb question:

(See attached)

I am looking at the code for this page - as an example.

I know how to set the BACKGROUND colour (or picture) is set, but I don't know how to put a picture on the part pointed to by the line.

---

I am working on it, but need to ask the question because I am not confident I can nut it out myself with the NAME of the area.
I know with the background it is:

<style>
    body {
        background-image: url("/Pictures/Relay2.jpg");
    }
</style>

But that is background-image.
Is it as simple as foreground-image?
(Tried - doesn't seem to work.)

I can't find a key word in there to help me get it right/working.

[dceejay]

Tty the standard HTML <img tag

[Trying_to_learn]

Sorry but you may need to elaborate on that…

I’m still at the shallow end of the pool.

I am also trying to get through 2 x 3 hour Javascript video tutorials.
Fun fun fun.

[dceejay]

Start by typing HTML img tag into google

[knolleary]

@Trying_to_learn the piece of info missing in Dave’s reply is you should add a ui_template to the group you want to add an image to. Within that template you can the necessary html for inserting an image… which is what Dave is pointing you towards.

[Trying_to_learn]

Thanks.

That too helps.

I sort of got the idea I needed to “edit” the “img tag” thingy, but FINDING it is a whole other story.

I attempted to look at the source but even with that simple page there is a tone of stuff.
I did add the extra/weird name to help me find that part of the code.
But even then… Where?

Moving the mouse is crazy (while viewing the source - or what ever it is called when you press the F12 button) all the flashing/highlighting of stuff.

But now I also know that I am looking for “img” it may help.

My goal is rather than a basic colour (easy) or a picture (granted) I am wanting to add a “texture” which is - I guess - a very small “picture” which is wallpapered all over the area to give a more textured image than a basic flat colour or complicated picture.

I do get also that I need to add a ui_template node to allow easy editing of the part of the screen.
But, then again: I’m a bit stuck on how that works with what I’ve seen.

The node gets “pointed to” which part of the page is to be altered.
But that is usually the “background” part and not the … other part I want to edit.

I’m guessing that it would be the “Messages/Viewyuyuyuyuyu” part.

Those Javascript clips were… a bit full on and I am recovering from what I have seen.

[Trying_to_learn]

Well, some movement.......

I tried a different page with even less things on it.

I searched the code (via pressing F12) and found this part:
See attached.

So, I can see the part which assigns the colour of the background-colour.
If I click in the colour selector and move the mouse, I see that part of the screen change colour.

Now I need to learn how to work out how to put in the code to put the picture there.

[knolleary]

No, you do not need to be digging into the structure of the page.

Add a uitemplate node. Edit the uitemplate node and set its content to an html IMG tag. Ensure it is in the group where you want the image to appear.

[Trying_to_learn]

Sorry, it wasn't I was wanting to do it the hardest way.

I was looking there out of curiosity on "where" all the stuff happens.

Ok, SOMETHING has happened.

I set the area to 6 x 4 (see attached)
but it seems to not quite be working.

The group is Buttons [Master Control] and originally it was 6 x 1.
I put it to 6 x 4 to see what happened. I don't get it.

(Quick edit:
This is what is in the ui_control node

<div ng-bind-html="msg.payload"></div>
<img src="/Pictures/metal_1.jpg">

)

[knolleary]

Is your intention to add an image within the group next to the existing widgets, or do you want to set it as the background of the whole group, behind the existing widgets?

[Trying_to_learn]

I am wanting that image to be the background for that group.

So there will be the metal pattern and the “this is a text input box” and the other thing are overlaid.

That way (explaining the dream) putting aside the “background image” I can have these groups on the screen and have a pattern/texture/picture behind them all giving them a more realistic look than just a plain colour.

I’ve picked this example just to help highlight what I am wanting to do. Though it does kind of look nice-ish.

[Trying_to_learn]

This is one site which I am looking at and not really getting it:

Background-Image in <img> element

It seems to have the answer in there ...... "somewhere". But not in a way I can understand.

This link looks even better and SEEMS to do what I want:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-image

But when I do that, it isn't that "group" which has the picture applied, it is the rest of the page.
Being that I put this in the node:

<style>
body  {
    background-image: url("/Pictures/metal_1.jpg");
}
</style>

I really seem to be missing something.

[Trying_to_learn]

To put what I have been trying out there, this is it:

[knolleary]

The CSS you have is setting the background image of the body element. A page has exactly one body and is the element that contains everything else.

To set the background of just one element, you need to change the CSS selector used to identify what element the background-image style should be applied to.
From the screenshot you posted earlier, I think you can use:

<style>
#Master_Control_Buttons  {
    background-image: url("/Pictures/metal_1.jpg");
}
</style>

[Trying_to_learn]

Thank you very very much.

I maybe should have worked that out. But I know I shouldn’t “oversell myself” on what I can do. Though sometimes I do get things right.

Taking on board what you said there: If the page has a lot of elements, it is going to be a lot of lines putting the image in them too. No worries. That is how it is.

And now another dumb-ish question:
There is the page - or body.
An area which has (in my example) buttons is an element.

So in the case it was Master_Control_Buttons.
Master_Control is the body and Buttons the element.

Now I need to find out the word/term for the actual buttons.
Or a way to make their background transparent.

I’ve got a bit of work to do with the pages I have and I shall try to do that last bit myself.
I think the “problem” is knowing the names for the parts.

Anyway, I’ll stop waffling on.