Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] Css Hintergrund über die ganze Seite

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [Erledigt] Css Hintergrund über die ganze Seite

    Hallo,

    Ich versuche gerade das design eines Shops zu ändern und scheitere momentan am Hintergrund.

    Also der wird nur zum Teil angezeigt.


    http://imgur.com/gHgD6lR( Falls er das Bild nicht anzeigt)

    so wie hier.


    Hat jemand eine idee wie ich das wegbekomme?

    mein HTML:

    Code:
    ...
    <div id="wrap">
       HIER STEHT DER CONTENT
    </div>
    <div id="bg2"></div>
    <div id="punkte"></div>
    
    ...

    Mein CSS dazu:

    Code:
    ...
    body {
    font-family:Arial, Sans-serif;
    font-size:12px;
    margin:0px 0;
    padding:0;
    color:#555;
    line-height:16px;
    /*background:url("img/bg.jpg") repeat-y scroll 0 0 / 1920px auto rgba(0, 0, 0, 0);*/
    }
    
    #bg2{
    	background: -webkit-linear-gradient(left, #a3a6ea 70% , white 30%); /* For Safari 5.1 to 6.0 */
    	background: -o-linear-gradient(right, #a3a6ea 70%, white 30%); /* For Opera 11.1 to 12.0 */
    	background: -moz-linear-gradient(right, #a3a6ea 70%, white 30%); /* For Firefox 3.6 to 15 */
    	background: linear-gradient(to right, rgba(147,149,233,1) , rgba(147,149,233,0)); /*Standard*/
    	width: 100%;
    	height: 100%;
    	position: absolute;
    	top: 0px;
    	right: 0px;
    	margin: 0 auto;
    	z-index: 10;
    }
    
    #punkte{
    background:url("img/bg.png");
    background-repeat:repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
    margin: 0 auto;
    z-index: 12;
    }
    #wrap {
    width:1000px;
    background:url(img/Hintergrund2.png) no-repeat;
    margin:0 auto 10px;
    position: relative;
    top: 0px;
    margin: 0 auto;
    overflow: hidden;
    z-index: 18;
    }
    ...

  • #2
    Kannst du das Styling nicht dem body-Tag zuweisen?

    Kommentar


    • #3
      Danke erstmal für deine antwort, da es aber ein "zwei geteilter hintergrund" wüsste ich nicht wie.

      Also wie man sieht ist es Lila auf der linkten seite und wird heller wenn es nach rechts geht. Dies ist in css unter #bg2 zu finden.

      Aber über den ganzen hintergrund werden noch so kleine Punkte angezeigt(unter #punkte zu finden). Um den Kontrast etwas hervorzuheben (wurde mir so gesagt, ich habe nur die vorlage bekommen und versuche es so umzusetzten)

      Kommentar


      • #4
        Ich steig nicht genau durch was nun wozu gehört - falls mein Kommentar nicht hilfreich ist,. ignoriere ihn daher bitte - aber du kannst einen HTML-Elment mehrere Hintergrundbilder gleichzeitig zuweisen: https://developer.mozilla.org/de/doc...le_backgrounds

        Kommentar


        • #5
          Code:
          background: url(../res/milyway.jpg) no-repeat center;
          background-size: cover;
          Damit ist es !immer über die ganze breite und länge verteilt! Auch responsiv.

          beispiel: tumblr vollbild
          oder im div: Futurebass.cc

          Musst dein bowserfenster resizen um den effekt zu sehen

          Kommentar

          Lädt...
          X