HTML & CSSur HTML, XHTML & CSS
5 svar · 504 visningar · startad av Kvarner
Hej!
Går det att använda två separata bakgrundsbilder på en sida? En vill jag ska synas på vänster sida och den andra på höger sida, som gardiner. Som det är nu har jag bakgrundsbilden i body (css) men kan inte få till ännu en bakgrundsbild utan att den första försvinner.
Du kan använda divs som du sätter bakgrunder på med css
Jag är inte sådär jättebra på detta. Hur skulle det i sådana fall se ut om jag valde att använda divs?
Såhär löste jag det:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<style type="text/css">
body { margin: 0; padding: 0; width: 100%; height: 100%; }
div#left_bg { width: 50%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; background: url("left_bg.gif"); }
div#right_bg { width: 50%; height: 100%; position: absolute; right: 0; top: 0; z-index: -1; background: url("right_bg.gif"); }
div#content { width: 700px; margin: 20px auto 20px auto; }
</style>
</head>
<body>
<div id="left_bg"></div>
<div id="right_bg"></div>
<div id="content">Innehåll här</div>
</body>
</html>
Annars kan man också köra med tricket att ha olika bakgrund på html och body så slipper man hantera några absolutpositionerade block t.ex. såhär:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
<title>Ett exempel</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
html, body {margin:0; padding:0; height:100%}
html {
background-image:url(gardin1.gif);
background-position:top left;
}
body {
background-image:url(gardin2.gif);
background-position:top right;
padding-left:250px;
padding-right:250px;
}
</style>
<body>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean tristique tortor nec neque. Nullam risus turpis,
bibendum vitae, dapibus id, tempor et, orci.
Etiam sed nunc eu lacus semper interdum. Aenean sollicitudin
nunc vel purus pharetra ultrices. Donec molestie ipsum at libero.
Praesent euismod pharetra risus. Donec condimentum quam ut quam
posuere rutrum. Aliquam erat volutpat. Mauris venenatis massa
id lectus. Mauris scelerisque, mi at condimentum eleifend,
arcu est iaculis lectus, id porta ipsum turpis at erat.
Morbi ac nunc ac erat dapibus mollis. Integer ipsum. Vestibulum
egestas, libero eu egestas rutrum, diam ligula commodo purus,
eu tincidunt quam eros et tellus. In hac habitasse platea dictumst.
</div>
</body>
</html>
Testa ;)
Stort tack, fungerar utmärkt.