Hintergrundbild mit no repeat auf 100% des Contents

Computer: Software & Programmierung HTML & CSS
#1

Hi,
ich möchte meinen Hintergrund ähnlich wie auf dieser Hp realisieren
http://www.mindfactory.de/Hardware/…
der Hintergrund ist nicht als allgemeiner Hintergrund eingefügt, sondern in div tags.

wieso auch immer wird dann ein weiterer hintergrund mit repeat-y darübergelegt...
ich blicke leider um diese uhrzeit nicht mehr durch :smiley:

kann mich jemand aufklären?

Grüße
#2

Hallo testfrei,

wenn du ein Hintergrundbild auf 100% des Contents haben möchtest:

html { 
 background: url(images/bg.jpg) no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

ansonsten benutzt man Techniken, wie die es eingesetzt haben, setz das Bild in die Mitte und vergibt dem Body eine Hintergrundfarbe, wo die Übergänge fließend sind, damit sieht das ganze so aus, als wäre es ein Bild, was sich der Bildschirmgröße anpasst.

Gruß XXD

#3

das ist klar, nur wie bekomme ich 2 verschiedene scroll geschwindigkeiten hin?
berechnet aus dem größenunterschied des hintergrundes (klein)
und des contens (größer)

#4

es wird mit js gelöst:

wenn ich diese zeile entferne scrollt die seite normal

#5

Vielleicht solltest du deine Frage präziser formulieren.

das ist klar, nur wie bekomme ich 2 verschiedene scroll
geschwindigkeiten hin?

Was für ein scroll? background-attachment: fixed; …zu Button „Bottom2Top“?
Also zum Bottom2Top…mit javascript oder auch css-animation

if($(".scrollup\_button").length\>0){ 
 $(window).scroll(function(){
 if ($(this).scrollTop() \> 100) {
 $('.scrollup\_button').fadeIn();
 } else {
 $('.scrollup\_button').fadeOut();
 }
 });
 $('.scrollup\_button').click(function(){
 $("html, body").animate({ scrollTop: 0 }, 600);
 return false;
 });
 }