3 Backgrounds

photo-junk · 8 Juli 2012

Hallo,

bin neu hier... Habe auch nicht so viel ahnung von CSS...

Habe da mal eine frage... Ich habe momentan diesen code...

body {
background-image:url(images/background.jpg), url(images/repeatx.jpg);
background-repeat: no-repeat,repeat;
background-position: center 0;

font-family:Arial, Helvetica, sans-serif;
font-size:100%;
margin:0;
padding:0;
color:#000;
}

Ich wollte halt das die background image mittig positioniert wird... Und da die image etwas klein ist habe ich dann einen schmalen streifen ausgeschnitten und wollte ihn rechts bzw. links vom bild dran setzen und dann halt mit repeat... Damit es sich halt anpasst (Je nach auflösung)...

Ich hoffe man kann mich verstehen... ^^

Hier mal ein bild von dem was ich meine...

Bin über jede Hilfe dankbar...

threadi · 8 Juli 2012

Zunächst:
Das hier:

photo-junk schrieb:
background-image:url(images/background.jpg), url(images/repeatx.jpg);

gibt es nicht. Man kann nur 1 Hintergrundbild pro Element angeben. Mehr anzugeben ist in der Entwicklung und wird von einigen Browsern auch schon unterstützt, aber ist nicht "weit verbreitet".

Für deinen Fall ist auch dieses eine Hintergrundbild ausreichend. Du müsstest nur eben dieses einbinden. Die weißen Streifen kannst Du dann mit einem border hinbekommen.

HTML:

<body>
<div id="placeholder">
 <div id="wrapper">
 </div>
</div>
</body>

Code:

body {
 background-image:url(images/background.jpg);
 background-repeat: no-repeat,repeat;
 background-position: center 0;
 font-family:Arial, Helvetica, sans-serif;
 font-size:100%; 
 color:#000;
}

#placeholder {
 border-left: 20px solid #fff;
 border-right: 20px solid #fff;
 margin: 0 auto;
 width: 990px;
}

#wrapper {
 background-color: #fff;
 margin: 0 auto;
 width: 800px;
}

Die Maße müsstest Du nur an deine Wünsche anpassen.

Und bitte verwende Code-Tags wenn Du Quellcode im Forum zeigst.

3 Backgrounds

photo-junk

Neues Mitglied

threadi

Moderator

Neueste Beiträge