webForumDet fria alternativet
Logga in / Bli medlem

repetera bild y led

HTML & CSS

2 svar · 632 visningar · startad av stavve

Medlem sedan sep. 200774 inlägg
Frågan#1

Hejsan har ett litet problem som säkert går att lösa.
Jag har skapat en sidan och mitten delen ska växa beroende på hur mycket sidan innehåller. Allt det funkar problemet är nu att mitten delen och den nedersta delen är två bilder som är jätte fina tillsammans så länge båda bilderna är hela. Den understa biten som bara hänger med neråt är alltid lika stor. Men mitten bilden repeterar sig och den sista biten blir olika stor beroende på hur mycket innehåll det finns. Så ibland kan mitten bilden repetera sig tex 2,5 gång och då passar ju inte den nedre bilden med den sista delen av mitten efter som det bara är halva bilden. Hoppas ni häånger med på vad jag menar med min flummiga förklaring. Grejen är den att kan man få bilden att alltid repetera sig helt. tex om den ändå ska repetera sig så att den repeterar sig helt och inte bara så mycket som innehållet kräver.
hoppas allt är klart med vad jag menar. Jag skickar även med css koden och html koden.

body
{
	background-color:#000000;
	margin-bottom:0;
	margin-top:0;
}

p
{
	margin-top:0;
	margin-bottom:0;
}
#main_content
{	
	position:relative;
	width:712px;
	margin:0px auto;
	margin-bottom:0px;
	vertical-align:top;
	
}

#top
{
	
	background-image:url(bilder/top.jpg);
	height:682px;
	background-repeat:no-repeat;
}

#bottom
{
	background-image:url(bilder/bottom.jpg);
	height:523px;
	background-repeat:no-repeat;
	vertical-align:bottom;
}

#dekoration1
{
	z-index:2;
	position:absolute;
	top:223px;
	left:-68px;
	background-image:url(bilder/decorationTop1.jpg);
	background-repeat:no-repeat;
	height:261px;
	width:68px;
}
#dekoration2
{
	z-index:2;
	position:absolute;
	top:221px;
	left:712px;
	background-image:url(bilder/decorationTop2.jpg);
	background-repeat:no-repeat;
	height:263px;
	width:66px;
}
#dekoration3
{
	z-index:2;
	position:relative;
	top:209px;
	left:-785px;
	background-image:url(bilder/decoration_paper.jpg);
	background-repeat:no-repeat;
	height:221px;
	width:75px;
}
#dekoration4
{
	z-index:2;
	position:relative;
	top:-86px;
	left:711px;
	background-image:url(bilder/decoration_pen.jpg);
	background-repeat:no-repeat;
	height:443px;
	width:138px;
}
#middle
{
	z-index:1;

	position:relative;
	background-image:url(bilder/middle.jpg);
	background-repeat:repeat-y;
	padding-left:30px;
	
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<title>TKINGDOM</title>

</head>

<body>

<div id="main_content">
			
            <div id="top"></div>
            <div id="dekoration1"></div>
            <div id="dekoration2"></div>
  <div id="middle">
              <p>sdsdfsdf</p>
              <p>sdf</p>
    <p>sdsdfsdf</p>
              <p>sdf</p>
              <p>sdf</p>
              <p>sdf</p>
              <p>sdf</p>
              <p>sdf</p>
              <p>sdf</p>
              <p>sdfsdlkjsdlfjsd</p>
              <p>sdfjksdäkjfsds</p>
              <p>dfsdlfjsdölfjsdäfjsdf</p>
              <p>fsd</p>
              <p>sfsd</p>
              <p>sdf</p>
              <p>sdff</p>
              <p>f</p>
              <p>f</p>
              <p>f</p>
              <p>f</p>
              <p>ff</p>
              <p>dfg</p>
              <p>g</p>
              <p>g</p>
              <p>fgf</p>
              <p>gfggfg</p>
              <p>SDLKFJSDFJSD</p>
              <p>SDFÖLLJSDFLÖKJSDF</p>
              <p>SD</p>
              <p>FSDF</p>
              <p>DSFSD</p>
              <p>FSD</p>
              <p>F</p>
              <p>SD</p>
              <p>FSDSDFSDFSDSDFS</p>
              <p>FSDDFSD</p>
              <p>FSDF</p>
              <p>SDF</p>
              <p>SDF</p>
    <p>sdfsdfsdfsdfsd</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>
 			
            <div id="bottom">  <div id="dekoration4"><div id="dekoration3"></div>
            </div></div>
          
</div>

</body>
</html>
Medlem sedan juli 20033 147 inlägg
#2

Du får nog bifoga bilderna också så man förstår vad du menar. :)

Medlem sedan jan. 2003296 inlägg
#3

Det relativt enkla sättet är väl att lösa det med javascript så att #middle alltid blir en multipel av bakgrundsbilden i höjdled. Men då får du leva med att det inte alltid ser klockrent ut för de som inte har javascript aktiverat. Inte hela världen i det här fallet kanske...

258 ms totalt · 4 externa anrop · v20260731065814-full.5386d3bf
127 ms — deklarationer (db)
0 ms — hämta statistik (cache)
128 ms — hämta tråd, inlägg och bilagor (db)
122 ms — ändringar (db)