css Problem im neuen Template
Posted: Tue Jul 11, 2017 2:08 pm
Hi zusammen,
beiße mir seit einiger Zeit die Zähne an einem Problem aus.
Ich möchte mit Hilfe von CSS im Head Breich eines Templates 2 Grafiken darstellen eine soll als Background no-repeate sticky bleiben und eine 2. soll an der selben Stelle repeate wiederholt werden.
Das ganze soll den zweck haben das bei einer großen Darstellung der Headbereich nicht zu leer wirkt bei einer kleinen am Schluß nur die erste Grafik in seiner sticky Position dargestellt werden soll.
Jetzt zeigt er mir nur die erste Grafik an und die 2. ignoriert er vollkommen. und das Problem mit dem repeat habe ich auch noch nicht raus das ist die Überlegung.
Das ist Logo 1 :
und das Logo 2:
Hätte dazu jemand eine Idee oder einen anderen Ansatz ?
Ach ja so sieht es aktuell aus ohne dem 2. Logo :
Danke und Gruß
Chris
beiße mir seit einiger Zeit die Zähne an einem Problem aus.
Ich möchte mit Hilfe von CSS im Head Breich eines Templates 2 Grafiken darstellen eine soll als Background no-repeate sticky bleiben und eine 2. soll an der selben Stelle repeate wiederholt werden.
Das ganze soll den zweck haben das bei einer großen Darstellung der Headbereich nicht zu leer wirkt bei einer kleinen am Schluß nur die erste Grafik in seiner sticky Position dargestellt werden soll.
Jetzt zeigt er mir nur die erste Grafik an und die 2. ignoriert er vollkommen. und das Problem mit dem repeat habe ich auch noch nicht raus das ist die Überlegung.
Code: Select all
#banner { width: 100%; height: 175px;
background-image: url(logo1.png), url(logo2.png);
^ ^
| |
oberes Bild ----+ |
|
unteres Bild ----+
background-position-x: 0px;
background-position-y: 20px, 20px;
^ ^
| |
oberes Bild ----+ |
|
unteres Bild ----+
background-repeat: repeat-x;
background-size: 33%, 80%;
background-color: #222244 }
@media only screen and (min-width:680px) {
#banner { width: 600px; height: 175px }
}
Ach ja so sieht es aktuell aus ohne dem 2. Logo :
Code: Select all
#banner {
margin: 2px 2px 2px 2px;
background: #222244
url("images/bild1.png") left top no-repeat;
background-size: 40%, 80%;
background-position-x: 0px;
background-position-y: 20px;
height: 175px;
border: 1px solid #FFF;
-webkit-border-radius: 10px;
box-shadow: 3px 2px 4px rgba(0,0,0,.4);
}
Chris