Design mit persönlichem Touch!

Mein Notizblock

Hier schreibe ich alle möglichen Dinge auf, die ich mir im Zusammenhang mit Webdesign und sonstigem Design merken möchte. Falls jemand hier was Brauchbares für sich findet, fein! Falls jemand zu einem Thema weitere Vorschläge oder Verbesserungen weiß, nur her damit!

Back
Background Images skalieren
January 14th, 2014 5:53 pm

Ich verwende sehr gerne Background Images in Headern oder auch auf Seiten, da das den klaren Vorteil hat, dass man noch leicht zusätzliche textuelle Elemente in diesen Containern verwenden kann. Mein Problem war bisher, dass ich zwar Images bereits skalieren konnte für ein responsive Design, aber bei Background Images hat’s mir einfach gefehlt, da man die ja nicht so einfach über das img-Tag im CSS Code ansprechen kann. Also hab ich recherchiert und verschiedene Informationen dazu im Internet gefunden.

Die Quintessenz, den CSS-Code der dann letztendlich für mich funktioniert hat, halte ich hier nun einfach mal fest, for further reference, so to say… Auf meiner Seite hier fehlt dieses Feature nämlich auch noch und auf zukünftigen Seiten empfiehlt sich der Einsatz auf jeden Fall auch.

Responsive Design ist ja heutzutage eigentlich fast ein “Muss”…

Hier also der Beispiel-Code für einen Header-Container:


#header {

background-image: url(…..);
background-position: center bottom;
background-repeat: no-repeat;
background-origin: content box;
background-size: 100% auto;
height: …;
}


Referenzen:

-> Gute Erklärung zu ‘background-position’ auf css-wiki.com

-> Gute Erklärung zu ‘background-origin’ auf webdesign.about.com

Design by Uta Kaemper