zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Header Zoom Effekt .

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.01.2014, 14:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.07.2013
Ort: Switzerland
Beiträge: 27
hakura befindet sich auf einem aufstrebenden Ast
Standard Header Zoom Effekt .

Hallo Zusammen,

ich möchte gerne ein Beispiel oder wissen wie man einen Header beim verändern der Breite zoomen kann.

Das Beispiel wie hier ist perfekt:

Dasmesh Modern Muse Template Preview - ThemeForest


Ich möchte einen Header einbauen der beim verändern der PAGE WIDTH genau diesen Zoom Effekt hat.

Danke für die Hilfe.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.01.2014, 15:24
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

Es passt sich doch nur der Hintergrund des divs der Breite des Browsers an?

Ich schlage vor, dass du einfach deine Webentwickler-Tools öffnest und nachsiehst, wie es umgesetzt wurde.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.01.2014, 15:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.07.2013
Ort: Switzerland
Beiträge: 27
hakura befindet sich auf einem aufstrebenden Ast
Standard

Ich kann da nichts daraus schliessen aus diesem Code . Ich brauch eine Lösung dafür um das genau so zu machen.

Ich kann das durchsuchen wie ich möchte auch wenn ich den ganzen CSS Teil herausnehme funktioniert es nicht.
Mit Zitat antworten
  #4 (permalink)  
Alt 13.01.2014, 16:28
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Nimm background-size: cover, ist CSS3 und funkioniert so wie du es haben willst.

Beispiel unter Perfect Full Page Background Image | CSS-Tricks
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #5 (permalink)  
Alt 13.01.2014, 17:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.07.2013
Ort: Switzerland
Beiträge: 27
hakura befindet sich auf einem aufstrebenden Ast
Standard

geht nicht.

Er zoomt mir nicht herein oder heraus. das bild bleibt nur immer ganz gross und passt sich der breite an, dass ist nicht mein ziel.


HTML:

HTML-Code:
  <img src="images/Mesago/img_banner_mesago.jpg" id="bg">
CSS:

Code:
#bg {
  position: fixed; 
  top: 0; 
  left: 0; 
	
  /* Preserve aspet ratio */
  min-width: 100%;
  min-height: 100%;
}

Es muss wie beim BEISPIEL , dass Bild herauszoomen beim verkleinern des Browsers, und hereinzoomen beim vergrössern des Browser .

Mit dem Beispiel klappt das nicht.
Mit Zitat antworten
  #6 (permalink)  
Alt 14.01.2014, 12:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.07.2013
Ort: Switzerland
Beiträge: 27
hakura befindet sich auf einem aufstrebenden Ast
Standard

Ich habe mein Ziel schlussendlich erreicht.

Ich habe in der HTML-Datei eine div mit de Klasse header verwendet.
Das Bild ist 1720x612

Hier der CSS Code:

Code:
.header{
-webkit-background-size: cover;
background-image: url(../images/Christ/amex_bg.jpg);
background-position: bottom;
background-repeat: no-repeat;
background-size: cover;
height: 401px;
margin: 0px;
padding 59px 0px 0px 0px;
}

Geändert von hakura (14.01.2014 um 14:24 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 14.01.2014, 16:39
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Oh, ging es mit background-size: cover; dann doch? Cooool..
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #8 (permalink)  
Alt 14.01.2014, 23:44
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Thielo, da stehen wir doch drüber, oder?
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #9 (permalink)  
Alt 15.01.2014, 01:38
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Das sowieso, ich wollte es nur anmerken gnihihihi
Aber hey, wissen sowieso alle besser bescheid als wir
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
header zoom in und out bei dem responsive design. hakura CSS 6 03.09.2013 10:57
Problem mit Header systemius CSS 10 04.05.2012 08:21
Abstandproblem im #header Bake CSS 8 26.11.2011 18:55
Untermenü im IE nici CSS 10 22.06.2009 22:19
header verrutscht... weblearner CSS 6 03.12.2008 20:34


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:16 Uhr.