mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Di 16.04.2024 14:47 Benutzername: Passwort: Auto-Login

Thema: CSS Hintergrund Bild grösse anpassen vom 16.07.2010


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> CSS Hintergrund Bild grösse anpassen
Seite: 1, 2  Weiter
Autor Nachricht
ghoster01
Threadersteller

Dabei seit: 14.08.2006
Ort: Berlin
Alter: 52
Geschlecht: Weiblich
Verfasst Fr 16.07.2010 14:23
Titel

CSS Hintergrund Bild grösse anpassen

Antworten mit Zitat Zum Seitenanfang

Wie kann ich über CSS ohne HTML ein Hintergrund Bild, deren gösse anpassen?

Also wie mus das da eingebaut werden?

ZB

/**
Navigation
**/
.mod_navigation
{
width:200px;
}
.mod_navigation ul
{
margin:0 5px;
padding:0;
border-bottom:1px solid #c6ad8d;
list-style-type:none;
}
.mod_navigation li
{
margin:0;
padding:5px 0;
border-top:1px solid #c6ad8d;
list-style-type:none;
}
* html .mod_navigation ul,
* html .mod_navigation li
{
height:1px;
}
.mod_navigation .level_2
{
padding:3px 0 0 9px;
border-bottom:0px;
}
.mod_navigation .level_2 li
{
padding:0 0 3px;
border-top:0px;
}
.mod_navigation a,
.mod_navigation li,
.mod_navigation span
{
font-weight:bold;
font-size:13px;
color:#FFE8C4;
}
.mod_navigation .level_2 a,
.mod_navigation .level_2 li,
.mod_navigation .level_2 span
{
font-weight:normal;
font-size:11px;
}

Jetzt soll im Hintergrund der Nav das Bild in der gösse der Nav angezeigt werden.
  View user's profile Private Nachricht senden
seal

Dabei seit: 31.07.2005
Ort: Pfalz
Alter: 41
Geschlecht: Männlich
Verfasst Fr 16.07.2010 14:27
Titel

Antworten mit Zitat Zum Seitenanfang

Code:
.mod_navigation ul  { background: #farbe url('pfad/zum/bild.jpg') no-repeat top; }


Zum Beispiel.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
nel

Dabei seit: 18.09.2004
Ort: Köln
Alter: -
Geschlecht: Männlich
Verfasst Fr 16.07.2010 14:43
Titel

Antworten mit Zitat Zum Seitenanfang

du willst es nachträglich skalieren, also so wie mit <img width="200" height="200" /> obwohl das bild 400px hat? oder?
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Fr 16.07.2010 15:10
Titel

Antworten mit Zitat Zum Seitenanfang

Kann es sein das es Mode geworden ist sich nicht deutlich genug auszudrücken?
Ich verstehe kein bisschen was Du erreichen möchtest.

Kannst Du das bitte genauer erklären, am besten anhand eines Bildschirmabzugs oder einem Online BSp?


Zuletzt bearbeitet von Kash am Fr 16.07.2010 15:10, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
ghoster01
Threadersteller

Dabei seit: 14.08.2006
Ort: Berlin
Alter: 52
Geschlecht: Weiblich
Verfasst Fr 16.07.2010 15:23
Titel

Antworten mit Zitat Zum Seitenanfang

Hallo nochmal,
es soll ein Bild angezeigt werden, im Hintergrund der Nav.
Das Bild soll sich auch der Größe des Objektes anpassen.

Also werden weitere Punkte in die Nav eintragen, passt sich das Bild der Nav an in Länge und Breite.

Aber nur wie in CSS...
  View user's profile Private Nachricht senden
seal

Dabei seit: 31.07.2005
Ort: Pfalz
Alter: 41
Geschlecht: Männlich
Verfasst Fr 16.07.2010 15:28
Titel

Antworten mit Zitat Zum Seitenanfang

Ohne das Bild zu kennen ... Glaskugel * Keine Ahnung... *

Das Bild wird an den Kanten abgeschnitten, je nach Größe deiner Nav. Machst du es 800px breit und deine Nav ist nur 400px breit, werden 400px des Bildes nicht angezeigt. Kommt ein Menüpunkt dazu, werden entsprechend der Größe weitere Pixel des Bildes angezeigt.

// warum probierst du es mit meinem Code nicht aus und schaust, ob das dein gewünschter "Effekt" ist? *Whaazzzz uppp?*


Zuletzt bearbeitet von seal am Fr 16.07.2010 15:29, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Fr 16.07.2010 15:32
Titel

Antworten mit Zitat Zum Seitenanfang

Code:

.nav .holder {
  position:relative;
  width:xx;
  height:xx;
  z-index:1;
}
.nav .holder img {
  width:100%;
  height:100%;
}
.nav .nav-punkte {
  position:relative;
  z-index:2;
}


Code:
<div class="nav">
  <div class="holder">
    <img src="foo.jpg" title="foo" alt="foo" />
  </div>
  <div class="nav-punkte">
    <ul><li><a href="#"></a></li></ul>
  </div>
</div>


So ungefähr könnte das aussehen. Da ich Deine genauen Anforderungen nicht kenne,
kann ich das nicht genau einschätzen.


Du kannst Dir aber auch mal folgendes jQuery Plugin ansehen.
Das muß nicht zwingend auf den BG des Bodys angewendet werden.

http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/


Zuletzt bearbeitet von Kash am Fr 16.07.2010 15:32, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
emorikaner

Dabei seit: 23.06.2009
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 16.07.2010 15:40
Titel

Antworten mit Zitat Zum Seitenanfang

Meinst du vlt. sowas? http://jsfiddle.net/tT5BS/

€: ja, lesen kann alles * Ich geb auf... * Kash hat in etwa das gleiche, hatte mein Postfenster schon offen sry Meine Güte!


Zuletzt bearbeitet von emorikaner am Fr 16.07.2010 15:41, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ähnliche Themen Hintergrund anpassen je nach Auflösung
Photshop, Hintergrund-Struktur und Farbe anpassen
bild an fenster anpassen
Bild an Seitengröße anpassen
Das Fenster genau an das Bild anpassen
Bild (Foto) zentriert an Browsergröße anpassen?
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.