✔ css background-image repeat-y LINKS UND RECHTS

Netzwerkidi · 28. Februar 2013

Hallo,

kann man ein BG-Image eigentlich auch links und rechts repeaten lassen, bzw. wie könnte man das anstellen?
Vielleicht sogar mit einem kleinen Abstand oben und unten und links und rechts.

LG
Idi

Rainve · 28. Februar 2013

Links und rechts repeaten: http://www.w3schools.com/css/tryit.asp?filename=trycss_background-repeatx

Das mit dem Abstand kannst du damit lösen indem du den Container etwas größer machst als dein bg-image und dein Bild dann mittig positionierst mittels background-position: http://www.css4you.de/background-position.html

Netzwerkidi · 28. Februar 2013

Scheint, als habe ich mich falsch ausgedrückt.
Ich meinte oben UND unten.

Rainve · 28. Februar 2013

Willst du da jetzt 1 Bild in jeder Ecke eines Containers mit einem kleinen Abstand außen herum oder wie soll ich das verstehen?

Netzwerkidi · 28. Februar 2013

Im Prinzip ja.
Aber es würde im reichen, wenn es mit einem Bild oben und unten ginge.

Rainve · 28. Februar 2013

Wenn du die Größe vom Container weist könntest du das gleich als ganzes Bild machen

oder

du könntest mehrer Container (4 um genau zu sein) übereinander legen und in jedem Container das Bild festlegen und positionieren.

oder

die <img>'s absolut im relativen Container ausrichten.

Mehr fällt mir grad auch nicht ein.

Frezl · 28. Februar 2013

Mit CSS3 kannst du sowas machen:

HTML:

<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('paper.gif'), url('paper.gif');
background-repeat:repeat-x, repeat-x;
background-position: top, bottom;
}
</style>
</head>

<body>
<p>repeat-x will repeat a background image only horizontally.</p>
<p>repeat-x will repeat a background image only horizontally.</p>
<p>repeat-x will repeat a background image only horizontally.</p>
<p>repeat-x will repeat a background image only horizontally.</p>
<p>repeat-x will repeat a background image only horizontally.</p>
<p>repeat-x will repeat a background image only horizontally.</p>
<p>repeat-x will repeat a background image only horizontally.</p>
<p>repeat-x will repeat a background image only horizontally.</p>
</body>
</html>

Damit wiederholt sich das Bild einmal oben und einmal unten.

Desweiteren wäre folgendes möglich:

HTML:

<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('paper.gif'), url('paper.gif'), url('paper.gif'), url('paper.gif');
background-repeat:no-repeat, no-repeat, no-repeat, no-repeat;
background-position: top left, top right, bottom left, bottom right;
}
</style>
</head>

<body>
<p>repeat-x will repeat a background image only horizontally.</p>
<p>repeat-x will repeat a background image only horizontally.</p>
<p>repeat-x will repeat a background image only horizontally.</p>
<p>repeat-x will repeat a background image only horizontally.</p>
<p>repeat-x will repeat a background image only horizontally.</p>
<p>repeat-x will repeat a background image only horizontally.</p>
<p>repeat-x will repeat a background image only horizontally.</p>
<p>repeat-x will repeat a background image only horizontally.</p>
</body>
</html>

Das sieht so aus, wie dein Beispiel.

Ich denke, du verstehst das Prinzip und kannst damit deine eigene Lösung finden.

Grüße
Frezl

Netzwerkidi · 1. März 2013

Hallo Frezl,

klasse Tipp!

Es scheint in der Tat alles zu gehen.

nachfolgend das, was ich wollte - und noch mehr!!

LG
Idi

HTML:

<!DOCTYPE>

<html>

<head>

<style type="text/css">

body

{

margin: 0;
padding:0;

background-image:url("http://www.tutorials.de/style/v11/loginbox/settings.png"), 

url("http://www.tutorials.de/style/v11/loginbox/settings.png"),

url("http://www.tutorials.de/style/v11/loginbox/settings.png"), 

url("http://www.tutorials.de/style/v11/loginbox/settings.png"), 
url("http://www.tutorials.de/style/v11/loginbox/settings.png"), 

url('http://www.tutorials.de/style/v11/loginbox/settings.png');

background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;

background-position: top 15px left 15px, top 15px right 15px, top 30% left 75%, center center, bottom 15px left 15px, bottom 15px right 15px;

border: 5px solid gray;

}

</style>

<title></title>

</head>

<body>

<p><b>Geht nicht, gibt's nicht!</b><br/><br/>
top 15px left 15px, top 15px right 15px, top 30% left 75%, center center, bottom 15px left 15px, bottom 15px right 15px;</p>
<p><b>Geht nicht, gibt's nicht!</b><br/><br/>
top 15px left 15px, top 15px right 15px, top 30% left 75%, center center, bottom 15px left 15px, bottom 15px right 15px;</p>
<p><b>Geht nicht, gibt's nicht!</b><br/><br/>
top 15px left 15px, top 15px right 15px, top 30% left 75%, center center, bottom 15px left 15px, bottom 15px right 15px;</p>
<p><b>Geht nicht, gibt's nicht!</b><br/><br/>
top 15px left 15px, top 15px right 15px, top 30% left 75%, center center, bottom 15px left 15px, bottom 15px right 15px;</p>
<p><b>Geht nicht, gibt's nicht!</b><br/><br/>
top 15px left 15px, top 15px right 15px, top 30% left 75%, center center, bottom 15px left 15px, bottom 15px right 15px;</p>
<p><b>Geht nicht, gibt's nicht!</b><br/><br/>
top 15px left 15px, top 15px right 15px, top 30% left 75%, center center, bottom 15px left 15px, bottom 15px right 15px;</p>

</body>

</html>

✔ css background-image repeat-y LINKS UND RECHTS

Netzwerkidi

Rainve

Mitglied

Netzwerkidi

Anhänge

Rainve

Mitglied

Netzwerkidi

Rainve

Mitglied

Frezl

Erfahrenes Mitglied

Netzwerkidi

Anhänge

Neue Beiträge