Move background image or foreground image - html

Question

//<![CDATA[
$(document).ready(function(){
$("#accordion li").click(function(e){
e.stopPropagation();
var subList = $(this).find('> ul');
if(subList.length) subList.slideToggle(300);
});
});
//]]>
html {
margin:0;
padding:0
}
body {
font-family: Tahoma, Geneva, sans-serif;
line-height: 1.6em;
color:#000;
text-align:justify;
background-image: url('../inc/pg/3.png'), url('../inc/pg/4.png');
background-repeat: no-repeat;
background-position:left bottom, right bottom;
background-attachment:fixed;
}
P {
font-size: 0.875em;
color:#000;
font-family:Tahoma;
}
h1 {
font: Verdana, Arial, sans-serif;
font-size: 1.875em;
background-color: #93A6A6;
line-height:1.5em;
margin:0 auto;
padding:0;
word-spacing: normal;
}
h2, h3, h4, h5, h6, h7, h8, h9, h10, h11, h12 {
font:normal 15px Verdana, Arial, sans-serif;
background-color: #93A6A6;
line-height:1.5em;
margin:0 auto;
padding:0;
}
div#container {
overflow: hidden;
min-width:600px;
width:1200px;
margin:0px auto;
border: 10px double #005cc6;
}
div#banner {
padding:10px;
background: url('header.png') no-repeat center center;
height:400px;
position:relative;
}
div#nav_main {
position: absolute;
left: 50px;
width: 1180px;
bottom: 5px;
}
div#social {
position: absolute;
float:right;
}
div#image {
background-image: url('http://oi61.tinypic.com/aakub6.jpg');
background-position:-10px -50px;
height:80px;
background-repeat:no-repeat;
}
div#uscite {
padding:30px 20px;
position:absolute;
right:0;
border:0px;
height:35%;
width:20%;
}
div#jp {
text-align: center;
width:50%;
height:100%;
float:left;
border:0px;
}
div#it {
text-align: center;
width:50%;
height:100%;
float:right;
border:0px;
}
div#navigation_left {
float: left;
width:22%;
}
div#navigation_right {
float: right;
width:20%;
}
div#content {
padding: 16px 10px;
overflow:auto;
margin-left:17%;
margin-right:17%;
}
div#footer {
clear:both;
padding:10px;
border:1px solid #444444;
background: url('footer.png') no-repeat center center;
height:70px;
}
div#back_top {
padding:10px;
float:right;
border:0px;
}
a {
text-decoration: none;
color:#0066FF;
font-size: 0.875em;
}
a:hover {
color: #0066FF;
text-decoration: underline
}
#accordion {
list-style: none;
padding: 0;
}
#accordion li {
display: block;
/*background-color: #8bc1dd;*/
font-weight: bold;
margin: 1px;
cursor: pointer;
padding: 5px 5px 5px 7px;
}
#accordion ul {
list-style: none;
padding: 0;
display: none;
}
#accordion ul li {
font-weight: normal;
background-color: #fff;
padding: 0 0 0 7px;
}
#accordion a {
color: black;
font-size: 0.875em;
text-decoration: none;
}
#accordion a:hover {
color: #0066FF;
text-decoration: underline
}
#accordion ul li a:hover {
padding-left: 60px;
color: #8484fc;
font-size: 18px;
background: url(bullet.png) left no-repeat;
}
div#language {
padding-top:10px
}
#nav_main div {
display:inline-block;
}
.blockspoiler {
padding:7px;
background-color:#ffde00;
font-size:12px;
color:#000;
text-align:justify;
line-height:14px;
}
.blockspoiler2 {
padding:7px;
background-color:#c86565;
font-size:12px;
color:#000;
text-align:justify;
line-height:14px;
}
.blockspoiler3 {
padding:7px;
background-color:#8991db;
font-size:12px;
color:#000;
text-align:justify;
line-height:14px;
}
.nav_main {
background:url(../img/nav_main.png);
}
.nav {
heigh:100%;
width:100%;
}
.home {
background-position: -0px -0px;
width: 111px;
height: 40px;
background-repeat:no-repeat;
}
.staff {
background-position: -0px -50px;
width: 126px;
height: 40px;
background-repeat:no-repeat;
}
.forum {
background-position: -0px -100px;
width: 136px;
height: 40px;
background-repeat:no-repeat;
}
.disclaimer {
background-position: -0px -150px;
width: 243px;
height: 40px;
background-repeat:no-repeat;
}
.secret {
background-position: -0px -200px;
width: 257px;
height: 38px;
background-repeat:no-repeat;
}
.bandiere {
background:url(../img/flag.png);
}
.flag {
height:100%;
width:100%;
}
.flag_en {
background-position:-0px -0px;
width:48px;
height:48px;
background-repeat:no-repeat;
}
.flag_es {
background-position:-0px -58px;
width:48px;
height:48px;
background-repeat:no-repeat;
}
.flag_fr {
background-position:-0px -116px;
width:48px;
height:48px;
background-repeat:no-repeat;
}
.flag_de {
background-position:-0px -174px;
width:48px;
height:48px;
background-repeat:no-repeat;
}
.flag_jp {
background-position:-0px -232px;
width:48px;
height:48px;
background-repeat:no-repeat;
}
.icon {
background:url(../img/icone.png);
}
.advice {
height:100%;
width:100%;
}
.chrome {
background-position:-0px -0px;
width:70px;
height:70px;
background-repeat:no-repeat;
}
.firefox {
background-position:-0px -80px;
width:70px;
height:70px;
background-repeat:no-repeat;
}
.facebook {
background-position:-0px -160px;
width:70px;
height:70px;
background-repeat:no-repeat;
}
.twitter {
background-position:-0px -240px;
width:70px;
height:70px;
background-repeat:no-repeat;
}
.affiliazioni {
background:url(../img/gemellati.png);
}
.gemellati {
height:100%;
width:100%;
}
.banner_1 {
background-position:-0px -0px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_2 {
background-position:-0px -41px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_3 {
background-position:-0px -82px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_4 {
background-position:-0px -123px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_5 {
background-position:-0px -164px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_6 {
background-position:-0px -205px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.affiliazioni2 {
background:url(../img/net.png);
}
.net {
height:100%;
width:100%;
}
.banner_7 {
background-position: -0px -0px;
width: 88px;
height: 31px;
background-repeat:no-repeat;
}
.banner_8 {
background-position: -0px -41px;
width: 88px;
height: 31px;
background-repeat:no-repeat;
}
.banner_9 {
background-position:-0px -82px;
width: 88px;
height: 31px;
background-repeat:no-repeat;
}
.banner_10 {
background-position:-0px -123px;
width: 88px;
height: 31px;
background-repeat:no-repeat;
}
.banner_11 {
background-position:-0px -164px;
width: 88px;
height: 31px;
background-repeat:no-repeat;
}
.banner_12 {
background-position:-0px -205px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_13 {
background-position:-0px -246px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_14 {
background-position:-0px -287px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_15 {
background-position:-0px -328px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_16 {
background-position:-0px -369px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_17 {
background-position:-0px -410px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_18 {
background-position:-0px -451px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_19 {
background-position:-0px -492px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_20 {
background-position:-0px -533px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_21 {
background-position:-0px -574px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_22 {
background-position:-0px -615px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
div#language{padding-top:10px}
#nav_main div{display:inline-block;}
<!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>
<title>Full Metal Panic Italy - Home</title>
<meta http-equiv="Content-Language" content="it" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="keywords" content="full, metal, panic, fmp, fumoffu, the second raid, spoiler, mithril, amalgam, sigma" />
<meta name="description" content="Full Metal Panic Italy, sito ufficiale italiano di Full Metal Panic con spoiler, informazioni, curiosità e molto altro! Fanart, immagini, download e schede tecniche" />
<link rel="stylesheet" type="text/css" href="../inc/style.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="../inc/js/prototype.js"></script>
<script type="text/javascript" src="../inc/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="../inc/js/lightbox.js"></script>
<link rel="stylesheet" href="../inc/lightbox.css" type="text/css" media="screen" />
<link rel="shortcut icon" href="../img/favicon.ico" />
<style type="text/css">
div#language{padding-top:10px}
#nav_main div{display:inline-block;}
</style>
</head>
<body>
<div id="container">
<div id="banner"><div id="uscite"><div id="jp"><img src="../img/uscite/scan.png" height="90" width="60" alt="" /><br />uscite jappo</div>
<div id="it"><img src="../img/uscite/scan.png" height="90" width="60" alt="" /><br />uscite ita</div></div>
<div id="social">
<img src="../img/facebook.png" width="70" height="70" title="Vieni a trovarci su Facebook" alt="Facebook" />
<img src="../img/facebook.png" width="70" height="70" title="Vieni a trovarci su Twuitter" alt="Twitter" />
</div>
<div id="image">
<script language="Javascript">
<!--
function image() {
};
image = new image();
number = 0;
// imageArray
image[number++] = "<img src='../inc/pg/1.png' height='350' width='204' alt='' />"
image[number++] = "<img src='../inc/pg/2.png' height='350' width='232' alt='' />"
image[number++] = "<img src='../inc/pg/3.png' height='350' width='176' alt='' />"
image[number++] = "<img src='../inc/pg/4.png' height='350' width='270' alt='' />"
image[number++] = "<img src='../inc/pg/5.png' height='350' width='290' alt='' />"
increment = Math.floor(Math.random() * number);
//-->
</script>
<script language="JavaScript">
document.write(image[increment]);
</script>
</div>
<div id="nav_main">
<div style="margin-right:50px"><img src="../img/transparent.gif" width="1" height="1" class="nav_main nav home" border="0" title="Home" alt="Home" /></div>
<div style="margin-right:50px"><img src="../img/transparent.gif" width="1" height="1" class="nav_main nav staff" border="0" title="Staff" alt="Staff" /></div>
<div style="margin-right:50px"><img src="../img/transparent.gif" width="1" height="1" class="nav_main nav forum" border="0" title="Forum" alt="Forum" /></div>
<div style="margin-right:50px"><img src="../img/transparent.gif" width="1" height="1" class="nav_main nav disclaimer" border="0" title="Dislaimer" alt="Dislaimer" /></div>
<div style="margin-right:50px"><img src="../img/transparent.gif" width="1" height="1" class="nav_main nav secret" border="0" title="Top Secret" alt="Top Secret" /></div>
</div>
</div>
<div id="navigation_left"><div id="language" align="center">
<img src="../img/transparent.gif" width="1" border="0" height="1" class="bandiere flag flag_en" title="English Translation" alt="English Translation"/>
<img src="../img/transparent.gif" width="1" border="0" height="1" class="bandiere flag flag_es" title="Spanish Translation" alt="Spanish Translation"/>
<img src="../img/transparent.gif" width="1" border="0" height="1" class="bandiere flag flag_fr" title="French Translation" alt="French Translation"/>
<img src="../img/transparent.gif" width="1" border="0" height="1" class="bandiere flag flag_de" title="German Translation" alt="German Translation"/>
<img src="../img/transparent.gif" width="1" border="0" height="1" class="bandiere flag flag_jp" title="Japanese Translation" alt="Japanese Translation"/>
</div>
<ul id="accordion">
<li><div id="image" align="center"><img src="http://oi61.tinypic.com/2pq45ys.jpg" height="" width="" alt="Storia"/></div>
<ul>
<li>Full Metal Panic!</li><li>Full Metal Panic? Fumoffu</li><li>Full Metal Panic! TSR</li><li>Riassunti Episodi</li><li>Manga</li><li>Lista Manga</li><li>Romanzi</li><li>Sigma</li><li>Overload</li><li>Comic Mission</li><li>Another</li><li>SDNED</li><li>Zero</li><li>Riassunti Manga</li><li>Riassunti Romanzi</li> </ul>
</li>
<li><div align="center"><img src="../img/spoiler.png" height="" width="" alt="Spoiler" /></div>
<ul>
<li>Infanzia di Sousuke</li><li>Infanzia di Tessa</li><li>Infanzia di Kurz</li><li>Michel Lemon</li><li>Le Origini</li><li>Fine della Mirthril</li><li>Yamsuk 11</li> </ul>
</li>
<li><div align="center"><img src="../img/gallery.png" height="" width="" alt="Gallery" align="center"/></div>
<ul>
<li>FanArt</li><li>Wallpapers</li><li>Animated</li><li>Avatar</li><li>Cosplay</li> </ul>
</li>
<li><div align="center"><img src="../img/interviste.png" height="" width="" alt="Interviste" align="center"/></div>
<ul>
<li>Perla Liberatori</li><li>Leslie La Penna</li><li>Valerio Manenti | J-Pop</li> </ul>
</li>
<li><div align="center"><img src="../img/other.png" height="" width="" alt="Other" align="center"/></div>
<ul>
<li>F.A.Q. e Curiosità</li><li>Titoli Episodi</li><li>Mithril</li><li>Isola Merida</li><li>Terroristi</li><li>Personaggi</li><li>Whispered</li><li>Black Tecnology</li><li>Arm Slave</li><li>Equipaggiamenti AS</li><li>Tuatha De Danaan</li><li>Palladio</li><li>Armi</li><li>Lambda Driver</li><li>Shouji Gatoh</li><li>Shiki Douji</li><li>Doppiaggio Italiano</li><li>Doppiaggio</li><li>Frasi Celebri</li><li>D.O.M.S</li><li>Luoghi</li><li>Viaggio a Canicatti</li><li>Retsu Tateo</li><li>Film Vs Anime</li> </ul>
</li>
</ul>
</div>
<div id="navigation_right"><ul id="accordion">
<li><div align="center"><img src="../img/multimedia.png" height="" width="" alt="Multimedia" /></div>
<ul>
<li>Soundtrack</li><li>Lyric</li><li>Videosigle</li><li>Trailers</li><li>Music Video</li><li>Skin Winamp</li><li>Nostro Live Action</li><li>DVD/VHS</li><li>Mikuni Shimokawa</li><li>Toshihiko Sahashi</li><li>Tema Google Chrome</li><li>Tema Firefox</li><li>App Smartphone</li> <li>Link1
<ul>
<li>Link2</li>
<li>Link3</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="content">
</div>
<div id="footer"><div id="back_top"><img src="#"></div></div>
</div>
</body>
<script type="text/javascript" src="../inc/menu/menu.js"></script>
</html>
I have an accordion menu (jquery) where every category is between li I want put an image as background to every category and to do so I used a div
I need to center the background-image of the div with another image between div like this:
So I want that this:
goes on this.
I tried to move the background but was been cut because goes out li or move the foreground
but moves both of them.
<div style="background: url('../img/bg.png'); height:80px; right:20px; up:40px" align="center"><img src="../img/storia.png" height="" width="" alt="Storia"/></div>
I tried with another approach:
CSS:
div#image {
background-image: url('../img/bg.png');
background-position:-10px -50px;
height:80px;
background-repeat:no-repeat;
}
HTML:
<div id="image" align="center"><img src="../img/text.png" /></div>
but this is the result
Here all codes:
HTML
<ul id="accordion">
<li><div id="image" align="center"><img src="../img/text.png" /></div>
<ul>
<?php
isset($_GET["page"]) ? $page=$_GET["page"] : $page="home";
$links=array(
"link" => "Text",
);
foreach($links as $href=>$text){
if($page!=$links){
echo '<li>'.$text.'</li>';
}else{echo $text;}
}
?>
</ul>
</li>
</ul>
CSS:
#accordion {
list-style: none;
padding: 0;
}
#accordion li {
display: block;
/*background-color: #8bc1dd;*/
font-weight: bold;
margin: 1px;
cursor: pointer;
padding: 5px 5px 5px 7px;
}
#accordion ul {
list-style: none;
padding: 0;
display: none;
}
#accordion ul li {
font-weight: normal;
background-color: #fff;
padding: 0 0 0 7px;
}
#accordion a {
color: black;
font-size: 0.875em;
text-decoration: none;
}
#accordion a:hover {
color: #0066FF;
text-decoration: underline
}
#accordion ul li a:hover {
padding-left: 60px;
color: #8484fc;
font-size: 18px;
background: url(bullet.png) left no-repeat;
}
Could you help me?

Answer 1

You can use:
li {
position:absolute;
margin-right: ? px;
margin-top: ? px;
}

Answer 2

Have you tried adjusting the line height in the CSS to ensure it has the same height as the background image? Example below
#mynav li {
line-height: 100px;
background: url(100pximage.png) left no-repeat;
}