Hintergrundbild im Webfront

hallo,

ich würde gern ein hintergrundbild hinter dem webfront haben. die öde eintänige farbe finde ich depremierend.

ich vermute mit der software direkt geht es nicht - sicher muss man das irgendwie direkt im „seiten-code“ machen?

wäre für einen tip sehr dankbar!!

grüße
sebastian

probier es mal mit einem Bild. .background :slight_smile:

…entschuldige - ich verstehe deine antwort nicht.

„wo“ - „wie“ - „was“ - .background?

vielleicht habe ich mit "ich brauche nur einen „tip“ untertrieben… :frowning:

Der Name des Image heist nicht Jolly.jpg sondern .Background!

muss groß geschrieben werden!!!

Bahnhof… :confused::confused::confused:

meinetwegen nehm ich jetzt ne datei … „bild.jpg“ und nenne es in „.background“ um. zumindest habe ich das jetzt so verstanden. was mache ich dann mit der datei? wo muss diese hin bzw. wo muss ich etwas eintragen?

Richtig. drauf achten es muss .Background heissen. Großes B.

Dann in die Kategorie ziehen wo es angezeigt werden soll.

  1. ich kann im windows keine datei mit nur .Background anlegen. dann sagt er mit immer es fehlt der dateiname.

  2. wo soll ich es in eine kategorie ziehen? im konfigurator? keine ahnung…

In deiner Console auf eine Kategorie rechte Maustaste->Objekt hinzufügen-> Medien hinzufügen. Oder in den Mediaordner wie es Dir beliebt.

also ich habe jetzt eine datei mit dem namen „hintergrund.jpg“ unter medien als datei hinzugefügt und ihm dem namen „.Background“ gegeben.

und nun? wie mache ich daraus ein hintergrund für meine webfront?

Dann in die Kategorie ziehen wo es angezeigt werden soll
soll ich dir mal einen shot machen

Habe es auch mal probiert, funktioniert. Aber was muss ich machen das es auf dem ganzen Bildschirm angezeigt wird.

Uwe, die Auflösung sollte etwa die deines Bildschirm entsprechen. Ansonsten wird scaliert.

okay… nun habe ich verstanden.

es ist aber nicht ganz das was ich gesucht habe - ich würde gern das hintergrund generell hinter das webfront legen - jetzt ist ja oben immernoch das doofe blau und so ein komischer grauer übergang darunter.

wie geht das?

ach ja - nebenbei - monitoraufläsung 1920x1080 - das bild hat exakt die größe und natürlich wird wild skaliert wegen dem oberem rand…

Das hat aber nix mit Hintergrund zutun. Das ist das ganze Webfront. Das kannst Du nur in der css ändern ist aber beim nächsten Update wieder Original. :smiley: Zumal ist diese eh gepackt. Wenn Du davon keine Ahnung hast, lass die Finger davon sonst ist dein Webfront platt!!!

entschuldige rainer - ich verstehe dich einfach nicht.

meine monitor hat die auflösung 1920x1080 - das bild auch und dennoch wird es nicht auf dem ganzem bildschirm angezeig. ergo oben ist immernoch das grässliche blau…

ergo das bild geht nicht über die ganze web-seite!

Was meinst Du mit oben ist blau. Das ist die Bedienleiste oder bin ich jetzt blöd. Der Bereich wo Du das Bild anzeigen kannst beschränkt sich auf den Hauptcontainer in der Mitte bis zum grauen Rand.

ich versuche zu interpretieren was ich verstanden habe.

  1. es ist nicht möglich DIE KOMPLETTE webseite mit einem hintergrund auszustatten. (eine webseite ist prinzipiell alles, was im webbraowser unter der eingabe angezeigt wird.)

  2. ich muss durch tests probieren , welche auflösung übrig bleibt, wenn ich einen 1920er bildschorm habe und oben das blau der „bedienleiste“ ohne hintergrund bleibt.

Richtig. Wenn Du in HTML, CSS, SOAP und Java Script sattelfest bist, kannst Du das ganze nach deinen Wünschen selbst erstellen.

Servus,

ich kram das nochmal raus weil
ich aktuell eine Möglichkeit suche eine Grafik mit schematischer Darstellung meiner Lüftungsanlage hinter eine Webfront Seite zu legen auf der ich dann gerne meine Temperaturen der Lüftungsanlage an den Stellen anzeigen würde wo sie eben gemessen werden.

Wie könnte man sowas sinnvoll bewerkstelligen, bitte?

Seit der 2.4 geht wohl die .background Möglichkeit nicht mehr falls dies ein Weg gewesen wäre. Über die Suche hab ich nichts finden können.

Oder muss man da direkt im HTML, CSS code etc. basteln?

Danke
Sepp

Hiho,

ich hab mir dafür ne Externe Seite gebastelt

index.html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta charset="ISO-8859-1">

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="refresh.js"></script>

<style type="text/css"> 

    .body      {font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; background-repeat: no-repeat; margin: 0px;} 
    .graphic {text-align: center; vertical-align: top; position: relative; width: 1200px; Height:800px; margin-right: auto; margin-left: auto; z-index:0;} 
	

</style> 
</head> 


<body> 

<!--########## Hintergrundbild ##########--> 
<div><img class ="graphic" src="kaelte.png" alt="grafik.gif" border="0"/>   


<!--########## Definitionen der Anzeigeparameter (Farbe, Schrift) ##########--> 

<div style = "position:absolute; top:184px; left:58px; z-index:1;" id="56kw_pic"></div> 
<div style = "position:absolute; top:268px; left:445px; z-index:1;" id="56kw_pump"></div>

<div style = "position:absolute; top:375px; left:61px; z-index:1;" id="45kw_pic"></div> 
<div style = "position:absolute; top:460px; left:450px; z-index:1;" id="45kw_pump"></div>

<div style = "position:absolute; top:5px; left:0px; z-index:1;" id="aulu_pic"></div>
<div style = "position:absolute; top:59px; left:812px; z-index:1;" id="aulu_valve"></div>

<div style = "position:absolute; top:594px; left:68px; z-index:1;" id="100kw_pic"></div>

<div style = "position:absolute; top:700px; left:795px; z-index:1; font-family: Arial; font-size: 16px; text-align: left; font-style: normal; font-weight: bold; color: #FFFFFF; " id="temp_1"></div>
<div style = "position:absolute; top:630px; left:795px; z-index:1; font-family: Arial; font-size: 16px; text-align: left; font-style: normal; font-weight: bold; color: #FFFFFF; " id="temp_2"></div>
<div style = "position:absolute; top:560px; left:795px; z-index:1; font-family: Arial; font-size: 16px; text-align: left; font-style: normal; font-weight: bold; color: #FFFFFF; " id="temp_3"></div>
<div style = "position:absolute; top:490px; left:795px; z-index:1; font-family: Arial; font-size: 16px; text-align: left; font-style: normal; font-weight: bold; color: #FFFFFF; " id="temp_4"></div>

<div style = "position:absolute; top:576px; left:1117px; z-index:1;" id="wilo1"></div>
<div style = "position:absolute; top:576px; left:1042px; z-index:1;" id="wilo2"></div>

<div style = "position:absolute; top:585px; left:960px; z-index:1; font-family: Arial; font-size: 16px; text-align: left; font-style: normal; font-weight: bold; color: #FFFFFF; " id="flow_2"></div>
<div style = "position:absolute; top:585px; left:1160px; z-index:1; font-family: Arial; font-size: 16px; text-align: left; font-style: normal; font-weight: bold; color: #FFFFFF; " id="flow_1"></div>



</div> 
</body> 
</html>

Die refresh.js :

var refreshId = setInterval(function()
{
     $('#56kw_pic').load('56kw.php');
}, 1300);

und die im JS Script geladene PHP

<?php

$var = GetValue(36516  /*[Anlagen\Kälteanlage\Kühlung Pos #2\Value]*/);


if ( $var == true )
{
echo '<img src="pump_on.png" width="25" height="25">';
}
else
{
echo '<img src="pump_off.png" width="25" height="25">';
}

?>

kurze Erklärung weil wenig Zeit :slight_smile:

Die HTML Seite wird ganz normal angezeigt, die IDs in den <div> stehen für den im JS geladenen PHP Script,
du lädst quasi via Ajax ein PHP Script mit dem du unterschiedliche Ausgaben erzeugen kannst ohne die Seite neu zu laden.
Einfach mal fummeln und testen :slight_smile: