Move background image or foreground image

Question

// 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;}




Full Metal Panic Italy - Home
	
		
	
	
	
	
	
	
	
	
	
	


		
			
uscite jappo

uscite ita











	
	
	
	
	


			







	
		
			Full Metal Panic!
Full Metal Panic? Fumoffu
Full Metal Panic! TSR
Riassunti Episodi
Manga
Lista Manga
Romanzi
Sigma
Overload
Comic Mission
Another
SDNED
Zero
Riassunti Manga
Riassunti Romanzi
		
	
	
		
			Infanzia di Sousuke
Infanzia di Tessa
Infanzia di Kurz
Michel Lemon
Le Origini
Fine della Mirthril
Yamsuk 11
		
	
	
		
			FanArt
Wallpapers
Animated
Avatar
Cosplay
		
	
	
		
			Perla Liberatori
Leslie La Penna
Valerio Manenti | J-Pop
		
	
	
		
			F.A.Q. e Curiosità
Titoli Episodi
Mithril
Isola Merida
Terroristi
Personaggi
Whispered
Black Tecnology
Arm Slave
Equipaggiamenti AS
Tuatha De Danaan
Palladio
Armi
Lambda Driver
Shouji Gatoh
Shiki Douji
Doppiaggio Italiano
Doppiaggio
Frasi Celebri
D.O.M.S
Luoghi
Viaggio a Canicatti
Retsu Tateo
Film Vs Anime
		
	

		
			
	
		
			Soundtrack
Lyric
Videosigle
Trailers
Music Video
Skin Winamp
Nostro Live Action
DVD/VHS
Mikuni Shimokawa
Toshihiko Sahashi
Tema Google Chrome
Tema Firefox
App Smartphone
			Link1
				
					Link2
					Link3

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:
enter image description here
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.

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:

but this is the result
enter image description here Here all codes: HTML


    
        
             "Text",
                );
                foreach($links as $href=>$text){
                    if($page!=$links){
                    echo ''.$text.'';
                    }else{echo $text;}
                }
            ?>

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?

frontender_amsterdam · Accepted Answer

You can use:

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

Move background image or foreground image

Answers (2)

Related Questions