“Change the x & y coordinates of the background image in CSS.”

[Anonymous]

Hello everyone, I read through many threads and found several background/header image questions, but they did not answer my question. I hope you can help. I recently changed themes on my website (www.DosLives.com) to Periodic WordPress Magazine Theme. I replaced the background/header image with my own, but you’ll see it cuts off the top of the image. I asked in the forum for this specific theme this question and the developer said “Change the x & y coordinates of the background image in CSS.” When I look at the CSS it says: /***** Structure *****/
body { background: #e0e0e0 url(../images/backgrounds/bg-darkheader.gif) repeat-x 0 0; }
#angles { background: url(../images/backgrounds/bg-spectrum.jpg) no-repeat center top;}

The image that I uploaded is the bg-spectrum.jpg. Can someone please help me understand where to put the x & y coordinates. I’ve tried multiple times and I either make the image disappear or nothing happens. The image is width: 970 and height 217 and resolution is 72.
This is the link to the theme’s example page and you’ll see what I mean by the header and it’s also background before in the example page there are other graphics in front of it, but on my site I don’t have anything in front of it. http://themeforest.net/item/periodic-a-premium-wordpress-magazine-theme/full_screen_preview/146174

Thanks again for your time and help.
Jon

[chrisburton]

Link to your website?

[joshuanhibbert]

Replace center and top with pixel values for the x and y co-ordinates.

[Anonymous]

@ChristopherBurton – The website is http://www.DosLives.com.

@Joshuanhibber – When I enter the x,y it moves the image around the page or it disappears, but it’s always the same size with the top of the image chopped. This is what I’m entering:
/***** Structure *****/
body { background: #e0e0e0 url(../images/backgrounds/bg-darkheader.gif) repeat-x 0 0; }
#angles { background: url(../images/backgrounds/bg-spectrum.jpg) no-repeat; 970px; 217px;}

I’ve also used “height” and “width.” Am I missing something in the code?

Again, thanks for everyone’s help. Much appreciated.

[chrisburton]

@jonbyington – In your header, on the 2 img tags, can you remove the extra “http://” for me

[wolfcry911]

#angles { background: url(../images/backgrounds/bg-spectrum.jpg) no-repeat center top;}

[Anonymous]

@ChristopherBurton – Took two hours looking and when I realized where to go I removed the extra one in a minute. Let me know what you think.

@wolfcry911 yes, that’s the original coding. The header on http://www.doslives.com is cut off at the top. I want it to show the heads of all the people in the image. The image is width: 970px and height 217px and resolution is 72.

Thanks again, Jon

[chrisburton]

@jonbyington – Change

to

[wolfcry911]

Oh, sorry – I didn’t fully understand what you were trying to do. The background image is placed at the top of #angles which is then covered over by the banner. Here’s what you want:

#angles { background: url(../images/backgrounds/bg-spectrum.jpg) no-repeat 50% 30px; }

The 50% centers it horizontally while the 30px starts it below the banner.

[Anonymous]

@ChristopherBurton OK, both of them are now deleted.

[chrisburton]

I think the problem here is the div above the image.

[Anonymous]

@wolfcry911 Thank you! I played around with it and moved it a little bit and it works. One question – Now, there is a small black rectangle on the bottom left section over the car. When I scroll over it, it links to the homepage, doslives.com on both Firefox and Safari. Do you know what is causing this or if I can delete it?

@ChristopherBurton Thanks for your help. I have the image how I want it to look now, but just trying to figure out the black rectangle I mentioned earlier in this post.

[chrisburton]

@jonbyington – Remove

[Anonymous]

1) Thanks @ChristopherBurton I see this when I look at the Source Code and I’ve looked in the CSS and php files, but can’t seem to find it because I don’t know where to look. Do you know which type of files I should look in to find it so I can delete it?

2) @WolfCry911 & @ChristopherBurton – The last thing I’m doing with this image is to hyperlink it back to http://www.doslives.com without having a border around it. I’ve looked at various sites and tried to do this, but I think I’m confusing HTML with CSS. This didn’t work and the header image disppeared:
/***** Structure *****/
body { background: #e0e0e0 url(../images/backgrounds/bg-darkheader.gif) repeat-x 0 0; }
DosLives
#angles { background: url(../images/backgrounds/bg-spectrum.jpg) no-repeat 50% 35px; text-indent; -9999px;}

Can you link me or please explain how to link the header image back to doslives.com without having a border around using the code that WolfCry911 gave me earlier:
#angles { background: url(../images/backgrounds/bg-spectrum.jpg) no-repeat 50% 30px; }

Thank you!

[chrisburton]

@jonbyington – On your img tag, add this:

Add this to your CSS

#banner {border: none;}

[Author]

Posts