CSS - Positioning Background Images

I'm using a variant of a sliding doors technique to swap between areas of a background on an li when it is in normal state and when it is being hovered over.

Code:

div#listmenu ul li {float:left; position:relative; list-style-type:none; background: #AAA url("css_images/nav_link.gif") repeat-x left top; border-right:1px solid #333; height:100%; font-weight:bold;}

div#listmenu ul li:hover {background: #555 url("css_images/nav_link.gif") repeat-x 0px -26px;}

Basically, I've got a drop down menu working in IE6, so no worries about that, and I used 2 backgrounds before and it worked. This works in Firefox, but not IE6.

Something simple I'm guessing!

Hi evryone. The web site in question can be found:

http://www.timtro.innovationdev.com/summer05/pg1.html

My problem is (i think) simple. There are two seperate problems, depending on the browser you use.

What I want is to have the background image appear only in the 'content' div, to be fixed (so it does not move with the scroll bar), and to be positioned with the allignment to the right hand side of the div.

With FireFox The image is fixed fine, but is position relative to the right hand side (RHS) of the BROWSER WINDOW, and not the div. This results in much of my image getting cut off, or completely invisible with full screen and a high resolution monitor.

With IE, The broblem isn't with left alignment, which works fine. I do suspect a problem with the top alignment, but that is not important. The problem is that the background is not fixed, it scrolls on large windows (try my CV for a long scrolling page.)

The CSS for this div is:

Code:

#content{
  float: left;
  width: 80%;
  border-left: 1px solid #ccd2d2;
  background-color:#FFFFFF;
  background-image:  url("http://www.timtro.innovationdev.com/images/bg.gif");
  background-position:right;
  background-attachment:fixed;
  background-repeat:repeat-y;
}

Thanks alot mates!

Cheers!

I have a number of icons.

- back button
- print button
- next button

I want to display them all on the same line. I want the back button to be placed on the far left while the other two on the far right. I have experimented quite abit with trying to get this to work, and have managed to sort of get it right by using left padding. However, I know this is a rubbish way of doing it as depending on the screen size will depend on where the right hand icons appear.

I did think I would just use tables, but figured someone here maybe able to help me out.

I redid a webpage and I am not using table, everything displays properly except the last two images, one has different height... I need to align the last one on top.

Since I'm new to css, I don't know how I could do float:top;..

view what I'm talking about.

hopitel.com/temp/test.html
Thanks.

I'm trying to position some things inside a DIV. Here's the basic layout:



What I did was put them in DIVs position them within the "parent" DIV relative to the upper left. Doesn't seem to work, so I'm doing something wrong.

Image One is easy, but the text and Image Two I just don't seem to grasping.

I've looked at the Floatutorial, I'm not grasping it, or the answer isn't there.

Should the text block and Image Two be within a separate DIV?

I am trying to apply a background to my #container div, but I don't want it to start until 150px down the y-axis (repeating y).

Dreamweaver set the code to:
Code:

#container {
	padding: 0px;
	width: 760px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	background-repeat: repeat-y;
	background-position: center 150px;
	background-image: url(graphics/container-bg.png);
}

I've even tried it with setting "center" to "0px" and the background image will still not start 150px down, but instead flush to the top and all the way to the end of the content.

I would ask if the problem is occurring because I'm mixing "center" with a pixel amount, but like I said it still wouldn't go down with "0px 150px".

Any help would be greatly appreciated. Thanks.

Hey, I would like to create a tab/erollover effect using css on some links. The problem is I am not sure how to get the whole of my image displayed in the background of the link.

So for example if my image is 100px wide, but my text only 40px wide only 40px of my background are displayed. How can I solve this?

Hi there,

Is it possible to start a background-color a certain amount frm the top, like you can with background images?

I have a background image which uses rounded corners, but when I set the background-color, it overlaps the background image so you cannot see it anymore. What I want to do is to start the background color, say, 20px from the top.

Is that possible?

Hello!

If i need to put background-image at the bottom of display i use such css rule:

background-position: bottom;

but in my case i need image to be fixed in right bottom corner.
apparently i cant use two declarations like:

background-position: bottom;
background-position: right;

so how could i attain this via just CSS?

Hi there,

I'm trying to position a background image (starting 756 pixels from the left) which is repeating horizontally - but of course am running into problems because as soon as you repeat-x an image repeats the whole screen, not taking into account background positions.

Does anyone have any ideas how I can possibly avoid this?!

The only thing I can think of is to create a huge image to factor in for all screen solutions, and just not repeat it at all. I'd prefer not to do it this way as firstly it's not very clean, and secondly it will result in a large file size.

Here is a link to the background image to show you what I'm talking about:
http://joshsphotos.com/images/bg.jpg

I've also put in the CSS that would show what I'm trying to achieve.

Code:

body {
background-image: url(../images/bg_repeat.jpg);
background-position: 756px 0px;
background-repeat: repeat-x;
}

Any help would be most appreciated.

Hi all

Having some problems with background image positioning - all CSS/XHTML has been validated

See http://community.foe.co.uk/tmp/quote_and_image_test.html

Relevant CSS :

Code:

#imageleft {padding:0px; float:left; width:auto; margin-right:5px; margin-bottom:5px}
.imagecaptionleft{padding:0px; margin:0px; text-align:left; font-size:8pt}

blockquote {
  background: transparent url(/images/common/quote1a.gif) left top no-repeat;
  margin:0px;
  padding: 0px;
  font-weight: normal;
color:#000;
}
blockquote div {
  padding: 2px 30px;
  background: transparent url(/images/common/quote2a.gif) right bottom no-repeat;
}

Relevant html

Code:

<div id="imageleft">
		  <img src="/images/common/dummy.gif" alt="Test image" width="100" height="100" />
<div class="imagecaptionleft">Caption goes here</div></div>
             
	<blockquote><div>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum augue odio, condimentum et, iaculis quis, facilisis nec, quam. Aliquam eros. Nulla ut lorem. Cras bibendum orci at ligula lobortis bibendum.</p>
	</div></blockquote>

The opening quote mark is hidden behind the image - as you can see it has a position of left, and for some reason the <div> within the <blockquote> is including the image so is full width.

Any help appreciated

Hi everyone,
I'm somewhat new to CSS and so far I have been able to solve everything except for this one problem.

This is code from the styles.css file in the blog that I'm building, now this is a free template that I'm using and there is also a header.php file but that has only php code.

In the frist part of the css file this appears:

body {
font-family: Verdana, sans-serif, Arial;
font-size: 80%;
color: #232323;
margin: 0px;
padding: 0px;
background: url(images/header.png) no-repeat top;
}

The background line is the image that appears as the background for the header portion of the site, and it is 960px X 150px.

Then there's this part:

#header {
float: left;
width: 960px;
height: 156px;
}

Then towards the middle of the code there is this other part which also relates to the header:

.top-header {
float: left;
width: 960px;
height: 62px;
padding-top: 60px;
}

.top-header a {
color: #000000;
text-decoration: none;
}

.top-header h1 {
color: #000000;
margin: 0px;
padding: 0px;
float: left;
width: 960px;
font-size: 26px;
}

.top-header p {
color: #000000;
margin: 0px;
padding: 0px;
float: left;
width: 960px;
}

So the problem I'm having is that I have designed a logo that is about 460px X 100px and I want this to go on top of the already defined background layer above in the body part. I have tried "positioning" and also tried to set it as another background and it just appears all over the place. Also the picture I crafted in photoshop has an invisible background so that only the decorative text of the log shows up, so if I use the background method to insert it, it appears with a white background.

So any pointers on this would be a great help. I have tried researching this all kinds of ways and I'm still not sure what to do

Thanks
Chas.

Hi,
I learned css a couple of years ago but am real rusty...anyways, here is an image that i wanted as the background to the top of the page. in the white space, i simply want a horizontal menu with 4 links. i cannot figure out how to position my links in that space correctly.
any help appreciated!

[/IMG]http://img251.imageshack.us/img251/1333/toplogoinfo.jpg[/IMG]

here is the code i have so far:

Code:

!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=iso-8859-1" /> <title>Precision Truck Painting and Repair</title>  <style type="text/css"> .body{ 	margin:0; 	padding:0; 	} 	 #page { 	width: 800px; 	margin: 0 auto 0 auto; }  #banner { 	background-image:url(images/jpegs/top_logo_info.jpg); 	height: 140px; 	background-repeat:no-repeat; }   ul.nav { 	list-style-type: none; 	padding-left: 0; 	margin:0px 0 0 360px; 	font-family:Arial, Helvetica, sans-serif; 	 } ul.nav li { 	display: inline; 	width:115px;} 	 ul.nav a { 	text-decoration:none; 	}  </style>   </head>  <body>  <div id="page">  <div id="banner">  <div id="top"> <ul class="nav"> 	<li class="index"><a href="index.html">Home</a></li> 	<li class="painting"><a href="pages/painting_collision.html">Painting/Collision</a></li> 	<li class="painting"><a href="pages/body_trailer_repairs.html">Trailer & Body Repairs</a></li> 	<li class="index"><a href="pages/Contact_us.html">Contact Us</a></li> </ul> </div>  </div>        </div>  </body> </html>

I have successfully added a background image to the page but it does not center how I want it to. Right now it is positioned at top center. I would like to move it to Center center of entire page. Using this code instead of center for background-position did not do anything. Neither did 50%, 50%. What can I do to move this over.
I have the same problem with a picture file to go above the background file and web links which are all placed at top left of page. It would be nice to move them to top center of page.
How is this possible through html code?

Here is the code for the background image:
<style type="text/css">
body { background-image: url(picture/bamboo.jpg) }
body { background-position: center }
body {background-repeat: no-repeat }
</style>

Thank you for your help,