Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

Background Problem


  • Please log in to reply

#1
lil_cat_luver

lil_cat_luver

    Member

  • Member
  • PipPipPip
  • 296 posts
Hello everyone

I'm having a problem with positioning an image to the bottom-right corner of the screen.

I want to get this background to be aligned to the bottom-right of the page.
Posted Image

First I tried this code (with body)
background: url(bg3.jpg) repeat-x;

And it displays like this:
Posted Image

I don't want the headphones to repeat but I need the red and black sections to repeat.
So I used this code:
background: url(bg3.jpg) bottom right repeat-x;
And the background disappeared

I've also tried to use two backgrounds, with body I used the same background as before but without the headphones. Then I set up a div like this
#container{
position: absolute;
top:0px;
left:0px;
margin: 0px;
background: url(headphones.jpg) bottom right no-repeat;
}

But the headphones image is not aligned exactly at the bottom-right of the page (spaces on bottom and right)
Posted Image

I've also tried to add another div outside the container (no bg for container) with the headphones as background, and that messes up everything else. So I have no idea what to do now.

Any help is appreciated. Thanks in advance.
  • 0

Advertisements


#2
Michael

Michael

    Retired Staff

  • Retired Staff
  • 1,869 posts
This is just a quick idea, put the gray bar image in the <html> tag, and then the headphones in the <body> tag. I think that should work.
  • 0

#3
lil_cat_luver

lil_cat_luver

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 296 posts
I'm not sure what you mean by putting it in the <html> tag, but I did try putting the headphones in the <body> tag and it's the same thing as that last image.

Edit: When I put the background for the container as #ffffff, it shows this image
Posted Image
The container appearantly has a set size even though I didn't set a size for it?? This must be why the headphones image is not aligned exactly at the bottom right, but how do I solve this?

Code for container
#container{
position: absolute;
top: 0px;
left: 0px;
margin: 0px;
background: #ffffff;
}

Edited by lil_cat_luver, 24 December 2006 - 02:59 PM.

  • 0

#4
Michael

Michael

    Retired Staff

  • Retired Staff
  • 1,869 posts
remove the background: #ffffff; from the container so it is transparent. Then do something like

html{
background-image: url('/gray_bar.png');
}

Of course the container has a size, the alternative is no size at all. Everything has default style rules, and if you don't set any the defaults are used.
  • 0

#5
lil_cat_luver

lil_cat_luver

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 296 posts
Thanks Michael. I've fixed it earlier today by going around it in a completely different way, but I'll remember this too.

Thanks again.
  • 0

#6
Michael

Michael

    Retired Staff

  • Retired Staff
  • 1,869 posts
Can you please post you fix for others the may find this thread?
  • 0

#7
lil_cat_luver

lil_cat_luver

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 296 posts
Well I put the headphones image as the body background. All the others (grey and red) I put as seperate backgrounds each in their own div.
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP