CSS - How To Position Background Image??

I'm currently using the tutorial located at Use Sprites to Create an Awesomeness-Filled Navigation Menu

Based on that I've created a sprite image that is 960x88.

I've got my menu in place, but the background-position completely fails. While I can change the width of each item, revealing more or less of the image it still only shows the first part of the image, repeating "Home". See attached screenshot for example of what it's doing.

Here is my HTML and CSS:

html Code:
Original - html Code <nav> <ul id="main_nav"> <li><a href="#" class="home"></a></li> <li><a href="#" class="case_studies"></a></li> <li><a href="#" class="solutions"></a></li> <li><a href="#" class="free_quotes"></a></li> <li><a href="#" class="government"></a></li> <li><a href="#" class="recycle"></a></li> <li><a href="#" class="resources"></a></li> <li><a href="#" class="about_us"></a></li> <li><a href="#" class="contact_us"></a></li> <li><a href="#" class="login"></a></li> </ul> </nav>

  
  <nav>
    <ul id="main_nav">
      <li><a href="#" class="home"></a></li>
      <li><a href="#" class="case_studies"></a></li>
      <li><a href="#" class="solutions"></a></li>
      <li><a href="#" class="free_quotes"></a></li>
      <li><a href="#" class="government"></a></li>
      <li><a href="#" class="recycle"></a></li>
      <li><a href="#" class="resources"></a></li>
      <li><a href="#" class="about_us"></a></li>
      <li><a href="#" class="contact_us"></a></li>
      <li><a href="#" class="login"></a></li>
    </ul>
  </nav>

css Code:
Original - css Code #main_nav { height: 40px; } #main_nav li { float: left; } #main_nav li a { background:url(../images/main_nav_sprite.png); display: block; height: 40px; } .home { background-position: 0px 0px; width: 60px; height: 40px; } .case_studies { background-position: -60px 0px; width:120px; height:40px } .solutions { background-position: -180px 0px; width:100px; height:40px } .free_quotes { background-position: -280px 0px; width:100px; height:40px } .government { background-position: -380px 0px; width:120px; height:40px } .recycle { background-position: -455px 0px; width:75px; height:40px } .resources { background-position: -555px 0px; width:100px; height:40px } .about_us { background-position: -642px 0px; width:87px; height:40px } .contact_us { background-position: -748px 0px; width:106px; height:40px } .login { background-position: -822px 0px; width:74px; height:40px }

  

  


 #main_nav {


     height: 40px;


 }


 #main_nav li {


     float: left;


 }


 #main_nav li a {


     background:url(../images/main_nav_sprite.png);


     display: block;


     height: 40px;


 }


 .home {


     background-position: 0px 0px;


     width: 60px;


     height: 40px;


 }


 .case_studies {


     background-position: -60px 0px;


     width:120px;


     height:40px


 }


 .solutions {


     background-position: -180px 0px;


     width:100px;


     height:40px


 }


 .free_quotes {


     background-position: -280px 0px;


     width:100px;


     height:40px


 }


 .government {


     background-position: -380px 0px;


     width:120px;


     height:40px


 }


 .recycle {


     background-position: -455px 0px;


     width:75px;


     height:40px


 }


 .resources {


     background-position: -555px 0px;


     width:100px;


     height:40px


 }


 .about_us {


     background-position: -642px 0px;


     width:87px;


     height:40px


 }


 .contact_us {


     background-position: -748px 0px;


     width:106px;


     height:40px


 }


 .login {


     background-position: -822px 0px;


     width:74px;


     height:40px


 } 

Hey Guys!

Trying to add a background position to a div and position it top right. Works in FF and IE7, but IE6 wants to put it top left.

Code:

background: $hexcolor url(/v2/PHP/img/$logo) no-repeat top right;

www.RoundtopRiders.com/v2/videos/

Thank you in advance!

Hi,
I have to get background position of image from a css class in a javascript function.
[CODE]
abc.button { width: 47px; background-image: url(../bt/save.gif); background-position: 0 -123px; }
[CODE]
I am able to get it in IE using backgroundPositionX and backgroundPositionY
[CODE}
var x = document.getElementById('abc').currentStyle.backgroundPositionX;
var y = document.getElementById('abc').currentStyle.backgroundPositionY;
[CODE}
But I am not able to get the background position in FireFox. Is there a way to get background position of image
in Firefox.
Thanks

I'm using background images on a <span> tag.

Code:

.thespan {
  display: -moz-inline-box;
  display: inline-block;
  height: 16px;
  width: 16px;
  margin: 2px;
  /* using longhand on purpose, since other classes override bits later */
  background-image: url(../img/iw_ds_sprite.gif);
  background-repeat: no-repeat;
  background-position: 0px 0px;
}

And already there's an issue. IE (even 6!) FF2 and 3, and Safari all do what I expect. However, Opera is off by about 40 pixels.

There is a shell around the span - changing this shell's class makes the internal background-position change, like so:

Code:

.theshell .thespan {
  background-position: 0px -40px;
}

This actually works, except it doesn't. Opera, having been wrong in the first place, is now wrong by the same amount - it jumps to -80px.

I've been pulling my hair out on this...I can't believe that it works in IE6 but not Opera!

Any help is greatly appreciated.

Tim

*** After posting I have been playing with other options, but would still love to know why the bg position on .container_12 does not work.


Please look at this page http://www.mts-diesel.com/index.php?cPath=20_24_56 There is an element w/ an class of container_12 that I have put an inline style declaration of

style="background:transparent url(images/container_12_bg.jpg) 0 1000px !important;"

I am trying to push the background down below the navigation but for some reason I can only move the background image to the right, and not down as needed.

Thank you for any help. Tom

ahh thanks figures it out

never mind.

I'm trying to create a tiered vertical navigation menu and I'm nearly there. Everything works correctly in FF but in IE the background-position property on the current menu item fails to position the bullet image. Removing the property displays it but at the margin which is set to 0px.

I'm not that savvy with CSS so if there's a better approach to this I'm open to suggestions.

Thanks for your help!

Open in FF to see how it's supposed to work:
Open in IE to see problem.

Here's the HTML

Code:

<div id="Menu">
<div id="nav_header">

   <div id="text">

            
		    Admissions & Financial Aid

            </div>


</div>

<ul id="nav_level_1">

         <li id="submenu"><a href="../index.php">Applying to Union</a></li>

			<ul id="nav_level_2">

               <li id="nav_active"><a href="index.php">Types of Admission</a></li>

			<ul id="nav_level_3">

               <li><a href="Transfer.php">Transferring to Union</a></li>

         <li><a href="Early.php">Early Decission</a></li>


         <li><a href="Regular.php">Regular</a></li>

         <li><a href="international.php">International Admission</a></li>

         <li><a href="aop_heop.php">AOP/HEOP</a></li>

         <li><a href="Medical.php">Eight-year Medical</a></li>

         <li><a href="Law.php">Six-year Law</a></li>

         <li><a href="MBA.php">Five-year MBA</a></li>


         <li style="line-height:0px;font-size:0px;">*</li>

		 </ul>

			<li><a href="../Applications.php">Apply Online</a></li>

         <li><a href="../Forms/index.php">Download Application Materials</a></li>

         <li style="line-height:0px;font-size:0px;">*</li>

		 </ul>

            <li><a href="../../FAQs/index.php">Have a Question?</a></li>


         <li><a href="../../Financial_Aid/index.php">Financial Aid</a></li>

         <li><a href="../../Events/index.php">Events/Programs & Visiting</a></li>

         <li><a href="../../interviews.php">Interviews</a></li>

         <li><a href="../../PerfectSchool/index.php">Tips for College Search</a></li>

         <li><a href="../../About/index.php">Admissions Staff</a></li>


         <li><a href="../../AlumniAdmissions/index.php"></a></li>

         <li><a href="../../Media/index.php"></a></li>

         <li><a href="/union/admissions/Viewbook/index"></a></li>

         <li><a href="/union/admissions/Alumni/index"></a></li>

         <li><a href="../../sample.php"></a></li>

         <li style="line-height:0px;font-size:0px;">*</li>

		 </ul>

   

</div>

Here is the pertinent CSS

Code:

/* Style for three levels of unordered lists */
#Menu #nav_level_1 {
    list-style-type:none;
    width: 200px;
    margin-left: 0px;
    padding-left: 0px;
    margin-top: 0px;
    padding-top: 0px;
    background-color: #d2c6aa;
    line-height:17px;
    word-wrap: break-word;
}

#nav_level_2 {
    list-style-type:none;
    width: 200px;
    margin-left: 0px;
    padding-left: 0px;
    margin-top: 0px;
    padding-top: 0px;
    background-color:#ded4bc;
    line-height:17px;
    word-wrap: break-word;
}

#nav_level_3 {
    list-style-type:none;
    width: 200px;
    margin-left: 0px;
    padding-left: 0px;
    margin-top: 0px;
    padding-top: 0px;
    background-color:#e5dece;
    line-height:17px;
    word-wrap: break-word;
}
/* End unordered list base styles */

/* To get indented, wrapping, text that's cross browser compatible
   we need to additionally style the unordered lists and line items under each top <ul>
*/

#nav_level_1 li {
    margin-left:20px;
}

#nav_level_1 li ul {
    margin-left:-20px;
}

#nav_level_2 li {
    margin-left: 40px;
}

#nav_level_2 li ul {
    margin-left:-40px;
}

#nav_level_3 li {
    margin-left:60px;
}

#nav_level_1 #nav_active {
    background-image: url(http://waterfall.union.edu/images/navigation/nav_current.gif);
    background-repeat: no-repeat;
    background-position: 4px;
    background-color: #f2ede1;
    margin-left:0px;
    padding-left: 20px;
}

#nav_level_2 #nav_active {
    background-image: url(http://waterfall.union.edu/images/navigation/nav_current.gif);
    background-repeat: no-repeat;
    background-position: 24px;
    background-color: #f2ede1;
    margin-left:0px;
    padding-left: 40px;
}

#nav_level_3 #nav_active {
    background-image: url(http://waterfall.union.edu/images/navigation/nav_current.gif);
    background-repeat: no-repeat;
    background-position: 44px;
    background-color: #f2ede1;
    margin-left:0px;
    padding-left: 60px;
}

#Menu #submenu {
    list-style-type: circle;
    padding-left: 0px;
    margin-top: 0px;
    padding-top: 0px;
    background-color:#d2c6aa;
    line-height:17px;
    word-wrap: break-word;
}

#submenu2 {
    list-style-type:circle;
    margin-left: 0px;
    padding-left: 0px;
    margin-top: 0px;
    padding-top: 0px;
    background-color:#ded4bc;
    line-height:17px;
    word-wrap: break-word;
}

The CSS background-position: right; is not working in Firefox/Netscape, and just aligns the background image to the left.

Know why?

I cant seem to get this to position correctly in firefox. Looks great in IE though...

Perhaps I should just use divs with margins rather than ul's

Hello.

So I have this situation (on the right):
h t t p : / / img339.imageshack.us/img339/6958/1stb.png

and when I change my browser resolution, I get this (on the right):
h t t p : / / img35.imageshack.us/img35/3892/2ndhw.png

Is it possible to do that the image wouldn't change the place on a screen even you when change the resolution of the browser? And yes, the image must be behind the text.

Thanks in advance for any suggestions and tips.

The layout I have going is a bit difficult to explain. Here's a diagram..



The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header.

I hope this makes sense.

What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though.

Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts?

Thanks in advance for any assistance/suggestions.

Hi, I have 2 divs. The first one is set to a specific width and height. The second one varies in size. The problem is that I need the second div to sit on top the first, and the page to position itself according to the first div.

Here's an example:http://www.caillouette.com/testSite/index2.php

The blank image will be white, but it's dark grey for demonstration purposes.

here's the CSS: Code:

.big_image{
z-index:9;
position:absolute;
left:0px;
top:0px;
margin: 5px 0x 0px 27px;
}

.big_image_blank{
z-index:0;
position:relative;
width:262px;
height:262px;
background-image: url(images/Uploads/Listings/blank.jpg);
margin: 5px 0x 0px 27px;
	
}

Hi I have just read this

Quote:
Using CSS to position text and graphics absolutly, relatively and overlapping
elements such as text and images. Includes the best way of overlapping text



Can some one tell me therefore if it is possible to explicitly specify the position to place an animated gif on top of an existing image with an image map; almost as a marker.

Thanks for your help

Rob

www . myspace . com / newsoundproduction


I cant get the background image to sit at the bottom of the page... already tried millions of things and im still getting the same error...

Code:

<style>
body {
  background-color:FFFFFF;
  background-image: url('http://copydential.net/gus/newwall5.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: bottom center;
}
table, tr, td {background:transparent; border:0px;}
table table table {background:transparent;}
table table table td {
  background-color:FFFFFF;
  filter:alpha(opacity=90); -moz-opacity:0.8; opacity:0.8; -khtml-opacity:0.8; 
}
table table table table td {filter:none;}
table table table {
  border-width:3px;
  border-color:FFFFFF;
  border-style:solid;
}
table table table table {border:0px;}
input {background-color:transparent !important;}
td, span, div, input, a, table td div div font,
body div table tbody tr td font {font-family:Verdana !important;}
td, span, div, input, table td div div font,
body div table tbody tr td font {color:000000 !important;}
.nametext, .whitetext12, .lightbluetext8, .orangetext15, .blacktext12,
.redtext, .redbtext, .blacktext10, .btext {color:000000 !important;}
a {color:000000 !important; text-decoration:none !important; text-transform:none !important; font-weight:normal !important; font-style:normal !important;}
a:hover {color:000000 !important; text-decoration:none !important; text-transform:none !important; font-weight:normal !important; font-style:normal !important;}
.r{;}
.navbar {visibility:visible;} .navbar font {visibility:hidden;}
a.text, table div font a {display:none;}
table div div {visibility:hidden;}
table table div div {visibility:visible;}
a img {filter:alpha(opacity=100); -moz-opacity:0.6; opacity:0.6; -khtml-opacity:0.6;}
a:hover img {filter:none; -moz-opacity:1.0; opacity:1.0; -khtml-opacity:1.0;}
img {border:0px;}
table table table {width:300px;}
table table td.text table, table table td.text table td {width:100%;}
</style> 
 
 
 
<style>
.contactTable {
   width:300px !important; height:150px !important; padding:0px !important;
   background-image:url("http://copydential.net/gus/newcontact.jpg");
   background-attachment:scroll; background-position:center center;background-repeat:no-repeat; 
   background-color:transparent;}
.contactTable table, table.contactTable td { 
   padding:0px !important;border:0px; background-color:transparent; background-image:none;}
.contactTable a img {visibility:hidden; border:0px !important;}
.contactTable .text {font-size:1px !important;}
.contactTable .text, .contactTable a, .contactTable img {filter:none !important;}
.contactTable .whitetext12 {display:none;}
</style>




<style>
td.text td.text table table table, td.text td.text table br, td.text td.text table .orangetext15, td.text td.text .redlink, td.text td.text span.btext {display:none;}
td.text td.text table {background-color:transparent;}
td.text td.text table td, td.text td.text table {height:0;padding:0;border:0;}
td.text td.text table table td {padding:3;}
td.text td.text table table br {display:inline;}
</style>