Jump to content

Welcome to Geeks to Go - Register now for FREE

Need help with your computer or device? Want to learn new tech skills? You're in the right place!
Geeks to Go is a friendly community of tech experts who can solve any problem you have. Just create a free account and post your question. Our volunteers will reply quickly and guide you through the steps. Don't let tech troubles stop you. Join Geeks to Go now and get the support you need!

How it Works Create Account
Photo

Background Problem

Started by lil_cat_luver , Dec 23 2006 11:36 PM

  • Please log in to reply

#1
lil_cat_luver
Posted 23 December 2006 - 11:36 PM

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
Posted 24 December 2006 - 04:07 AM

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
Posted 24 December 2006 - 02:47 PM

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
Posted 24 December 2006 - 07:34 PM

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
Posted 24 December 2006 - 10:32 PM

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
Posted 24 December 2006 - 10:34 PM

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
Posted 28 December 2006 - 10:27 PM

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
Back to Web Development · Next Unread Topic →




Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

  1. Geeks to Go Community
  2. → Development
  3. → Web Development

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP