erweiterter hintergrund

propain66 · 21.08.2010

Hallo, ich versuche mich gerade an einer Seite für eine Firma und habe da ein Problem. Das ist die erste Seite die ich erstelle, bis jetzt nur tutorials gemacht. Also ich habe die Seite in Photoshop designed und habe sie jetzt mal als html gespeichert, das ging soweit ganz gut nur ich habe das problem das ich bei größeren auflösungen seitenränder habe (wie auf den beispielbild unten) und ich wollte fragen ob es da eine funktion gibt damit die größe automatisch angepasst wird mit hintergrundbild. weil wenn ich dieses sonnenblumenbild in den hintergrund noch setze mit dreamweaver passt es nicht zu dem hintergrund aus photoshop.

Beispielbild:
http://administrator.kilu.de/Bilder/preview.png

pluspiano · 21.08.2010

AW: erweiterter hintergrund

Meinst Du soetwas schönes?

Zwei Möglichkeiten

1. JQuery

2. per CSS Anweisung
Perfect Full Page Background Image | CSS-Tricks

propain66 · 21.08.2010

AW: erweiterter hintergrund

danke das zweite gefällt mir sehr ich werde mir das mal anschauen,
aber ich glaube das wird nicht so einfach werden da die seite an sich ja ein guntergrund hat der aus photoshop kommt, den müsste ich dann wegmachen und schauen das die seite um den content in der mitte drumherum transpartent wird
mal sehen danke

pluspiano · 21.08.2010

AW: erweiterter hintergrund

Technique #2 sollte reichen und ist besser, weil W3C-valide. Das Sonnenblumenfoto als eigenes Image jpg oder png von dem Content separieren.
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
Hier die Werte ggf. anpassen. Margin-left ist immer halber Negativwert.
Viel Spass. Ist in der Tat extravagant und man sieht es selten.

cebito · 21.08.2010

AW: erweiterter hintergrund

pluspiano schrieb:
@media screen and (max-width: 1024px)

Ist aber CSS3 und wird vom IE bis hoch zum IE8 nicht verstanden, dafür musst du die downloaden und dann im head einbinden:

HTML:

    <!--[if lte IE 8]>
        <script src="css3-mediaqueries.js"></script>
    <![endif]-->

propain66 · 21.08.2010

AW: erweiterter hintergrund

also ich bekomm das nicht hin das da wo auf dem beispielbild die sonnenblumen+himmel sind, das transparent ist, wenn ich es in dreamviewer einfüge ist dort einfach ein weißer hintergrund. ich brauche wohl nachhilfe in photoshop wie man das transparent macht und so speichert das es im web funktioniert.

http://administrator.kilu.de/Bilder/preview2.png

pluspiano · 22.08.2010

AW: erweiterter hintergrund

Die Transparenz kannst und solltest Du auch per CSS erzielen.

#content {
filter:alpha(opacity=90); /* IE */
-moz-opacity: 0.90; /* Mozilla */
opacity: 0.90; /* Opera */
}

#content meint das Inhaltsfeld, welches über dem bg-image liegt.
Das Inhaltsfeld kannst du auch mit z-index eindeutig über das Sonnenblumenbild legen.

sonnenblume z-index 1
Inhaltsfeld z-index 2

Nachzulesen bleistiftsweise CSS Transparenz | Tobias Otte

Vorteil: Sollte der Browser das nicht können, gibt es zwar die Transparenz nicht, aber der Surfer sieht trotzdem alles.

Manfred62 · 22.08.2010

AW: erweiterter hintergrund

Hallo

Zum Thema 100% Hintergrund hätt ich auch noch einen Link:
Scaling Fake BG Image

Gruß Manfred

propain66 · 22.08.2010

AW: erweiterter hintergrund

in css muss ich mich erstmal reinlesen, davon hab ich garkeine ahnung

Manfred62 · 22.08.2010

AW: erweiterter hintergrund

Unser Universallink zum lernen :hmpf:
Teil 1 kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS

Gruß Manfred

pluspiano · 22.08.2010

AW: erweiterter hintergrund

Was Propain66 will, ist in der Tat schwierig. Viele, wen nicht die meisten, machen erst gar nicht den Versuch, ein bg-image für das Browserfenster vollständig (per CSS) zu erhalten. Hut ab. Die Frage ist leicht, die Antwort aber schwierig.

Propain66 versucht, die Transparenz eines Bildes per Photoshop herzustellen. Das muss im WEB nicht sein. Ein Bild benötigt im Browser NULL Transparenz, wenn es per CSS und opacy angesteuert wird.

Im Moment leben wir zwischen CSS 2.1 und CSS3. Ich gebe zu, dass da auch mir vieles noch verborgen ist. Der sehr gute Hinweis auf das css3-mediaquerys.js hilft mir, aber auch allen anderen TN. Dazu ist ein Forum da.

Frei nach Galileo: Und Lesen bildet doch :lol:

propain66 · 22.08.2010

AW: erweiterter hintergrund

ich hab das jetzt schon den ganzen tag versucht aber ich bekomm es nicht hin, ich werde einfach das in PS erstellte mittig setzen und mit background-image: ein hintergrund einsetzen, mich würde mal eure meinung interessieren ob euch die hp gefällt

vorschau:
http://administrator.kilu.de/Bilder/preview3.png

falls sich jemand besser auskennt, zeit und lust hat mir das zu zeigen, wie man das noch realisieren kann das es ein schönerer hintergrund ist kann ich ja per pn melden

Manfred62 · 23.08.2010

AW: erweiterter hintergrund

propain66 schrieb:
ich hab das jetzt schon den ganzen tag versucht aber ich bekomm es nicht hin,..

Was hast du versucht?? Hast du eine funktionsfähige html? Hochgeladen?
Nur mit einer Grafik von PS wird das nichts.

Einen guten Link zum lernen hab ich dir schon gegeben.

Du willst das Sonnenblumen-Himmel Bild als Hintergrund?
Hast du es als extra Datei?

Fragen über Fragen... Du bist dran.

Gruß Manfred

pluspiano · 23.08.2010

AW: erweiterter hintergrund

Manfred62 schrieb:
...Zum Thema 100% Hintergrund hätt ich auch noch einen Link:
Scaling Fake BG Image

Gruß Manfred

Danke für den Link. Bei diesem 'schlichten' CSS werden aber nicht immer die XY-Verhältnisse des Bildes beibehalten. Ein schmales Browserfenster verzerrt leider das Hintergrundbild.

Manfred62 · 23.08.2010

AW: erweiterter hintergrund

pluspiano schrieb:
Danke für den Link. Bei diesem 'schlichten' CSS werden aber nicht immer die XY-Verhältnisse des Bildes beibehalten. Ein schmales Browserfenster verzerrt leider das Hintergrundbild.

Ist ein Kompromiss. Aber ein guter und simpler

Gruß Manfred

propain66 · 23.08.2010

AW: erweiterter hintergrund

Manfred62 schrieb:
Was hast du versucht?? Hast du eine funktionsfähige html? Hochgeladen?
Nur mit einer Grafik von PS wird das nichts.

Einen guten Link zum lernen hab ich dir schon gegeben.

Du willst das Sonnenblumen-Himmel Bild als Hintergrund?
Hast du es als extra Datei?

Fragen über Fragen... Du bist dran.

Gruß Manfred

natürlich als html, ja das sonnenblumen bild will ich in den hintergrund haben und ich hab es als datei extra 3800x3600 px groß

Manfred62 · 23.08.2010

AW: erweiterter hintergrund

propain66 schrieb:
natürlich als html, ja das sonnenblumen bild will ich in den hintergrund haben und ich hab es als datei extra 3800x3600 px groß

Dann lad das mal hoch, damit man live was machen kann. Die Texte kannst ja mit Blindtexten füllen. Mach halt alles unkenntlich (Bilder/Logos), wenn nötig.
Wieviel MB hat das große Bild? Rechne es mal runter auf 1920x1080px. Mehr brauchst nicht. Später testen wir das noch kleiner.
Leg es in den body

Code:

body {background: url(pfadzumbild) center center no-repeat;}

Dann sieht man weiter.

Gruß Manfred

propain66 · 23.08.2010

AW: erweiterter hintergrund

so index

merke gerade hab vergessen das sonnenblumen bgimg zu verkleinern..
/fixed

Manfred62 · 23.08.2010

AW: erweiterter hintergrund

Sorry, du willst mich auf den Arm nehmen?? Ich meinte, ein richtiges html Konstrukt! Was du da fabriziert hast, ist eine Imagemap in Tabellenform oder sonstwas...:'(

Die Datei hat nichtmal einen Doctype...

Hast du das Bild mit PS gespeichert "für Web und Geräte.."?
Das Bild ist immer noch gigantisch groß. Ich hab das nun geschnitten und (in 5 sec) mit RIOT auf 190kb gebracht.

Wegen der html: du solltest wirklich die Basics (html/css) lernen.

Hier mal eine html:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  <head>
    <meta name="generator" content="HTML Tidy for Windows (vers 25 March 2009), see www.w3.org" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="generator" content="PSPad editor, www.pspad.com" />
    <title>
      Untitled
    </title>
    <style type="text/css">
/* <![CDATA[ */
    * {margin: 0; padding: 0;}
    body {background: url(Sonnenblumenfeldsmall.jpg) center center no-repeat;}
    #wrapper {width: 960px;margin: 20px auto;background: url(bg.png);}
    p {padding: 20px 30px;}
    /* ]]> */
    </style>
  </head>
  <body>
    <div id="wrapper">
      <p>
        <strong>Hier gehört nun der ganze Rest der Seite rein.</strong>
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetuer Mauris Vestibulum tellus Curabitur quis. Id dolor
        eleifend lacinia pulvinar tempor justo pulvinar Curabitur eget hac. Donec semper sit congue
        Vestibulum et. Ut ligula rhoncus nibh Pellentesque cursus tempus vitae neque vel fames.
        Tellus Aliquam Curabitur tempor Curabitur wisi habitasse Curabitur vel molestie eleifend.
        Auctor id odio. Sed orci facilisi ut Pellentesque egestas Proin Curabitur penatibus tempus
        in. Adipiscing vitae id at orci pulvinar pellentesque dictum nibh Aliquam leo. Pretium
        nulla sed. Semper nibh cursus elit id gravida pretium Pellentesque sit malesuada hendrerit.
        Aliquam parturient a quis hendrerit congue massa consectetuer laoreet id nunc. Molestie
        elit tempus interdum montes convallis tortor.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetuer Mauris Vestibulum tellus Curabitur quis. Id dolor
        eleifend lacinia pulvinar tempor justo pulvinar Curabitur eget hac. Donec semper sit congue
        Vestibulum et. Ut ligula rhoncus nibh Pellentesque cursus tempus vitae neque vel fames.
        Tellus Aliquam Curabitur tempor Curabitur wisi habitasse Curabitur vel molestie eleifend.
        Auctor id odio. Sed orci facilisi ut Pellentesque egestas Proin Curabitur penatibus tempus
        in. Adipiscing vitae id at orci pulvinar pellentesque dictum nibh Aliquam leo. Pretium
        nulla sed. Semper nibh cursus elit id gravida pretium Pellentesque sit malesuada hendrerit.
        Aliquam parturient a quis hendrerit congue massa consectetuer laoreet id nunc. Molestie
        elit tempus interdum montes convallis tortor.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetuer Mauris Vestibulum tellus Curabitur quis. Id dolor
        eleifend lacinia pulvinar tempor justo pulvinar Curabitur eget hac. Donec semper sit congue
        Vestibulum et. Ut ligula rhoncus nibh Pellentesque cursus tempus vitae neque vel fames.
        Tellus Aliquam Curabitur tempor Curabitur wisi habitasse Curabitur vel molestie eleifend.
        Auctor id odio. Sed orci facilisi ut Pellentesque egestas Proin Curabitur penatibus tempus
        in. Adipiscing vitae id at orci pulvinar pellentesque dictum nibh Aliquam leo. Pretium
        nulla sed. Semper nibh cursus elit id gravida pretium Pellentesque sit malesuada hendrerit.
        Aliquam parturient a quis hendrerit congue massa consectetuer laoreet id nunc. Molestie
        elit tempus interdum montes convallis tortor.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetuer Mauris Vestibulum tellus Curabitur quis. Id dolor
        eleifend lacinia pulvinar tempor justo pulvinar Curabitur eget hac. Donec semper sit congue
        Vestibulum et. Ut ligula rhoncus nibh Pellentesque cursus tempus vitae neque vel fames.
        Tellus Aliquam Curabitur tempor Curabitur wisi habitasse Curabitur vel molestie eleifend.
        Auctor id odio. Sed orci facilisi ut Pellentesque egestas Proin Curabitur penatibus tempus
        in. Adipiscing vitae id at orci pulvinar pellentesque dictum nibh Aliquam leo. Pretium
        nulla sed. Semper nibh cursus elit id gravida pretium Pellentesque sit malesuada hendrerit.
        Aliquam parturient a quis hendrerit congue massa consectetuer laoreet id nunc. Molestie
        elit tempus interdum montes convallis tortor.
      </p>
    </div>
  </body>
</html>

Uploaded with

Gruß Manfred

propain66 · 23.08.2010

AW: erweiterter hintergrund

wie schon gesagt ich mach nur design