Jump to content
Killersites Community
Sign in to follow this  
Jimy

Positioning A Bacground Photo

Recommended Posts

I am trying to add a background to a few of my pages (categories). I want to it evenly placed on both sides of the Y axis, but cannot seem to get this done. Is it the size of the photo or something with my code? Please see below. Thank you in advance for your help.

 

 

</head>

<body <?php body_class() ?>>

 

<?

if ( is_category('music') )

{

?>

<style type="text/css">

body {

background:url('http://www.spitfirehiphop.com/wp-content/uploads/2012/05/SFHH-Music-Page-Background9.png');

background-repeat: yes-repeat;

background-size: 73em;

background-attachment:fixed; and "background-repeat: yes-repeat;

background-position:center;

}

 

#bglink{

display:block;

height:100%;

width:100%;

position:fixed;

left:0;

top:0;

z-index:0;

text-indent:-5000em;

}

</style>

<a href="http://www.datpiff.com/mixtapes-detail.php?id=356052" id="bglink" target="_new">jump to http://www.datpiff.com/mixtapes-detail.php?id=356052/</a>

<?

}

Share this post


Link to post
Share on other sites

You probably haven't given enough information to get a full answer.

I presume that you have a doctype in the html or php file.

The style tag should be in the head section, not the body section.

background {} is the short code. When you use the other long codes like background-position, the background should be background-image {} or use the short code for all styles:-

body {
background:url('http://www.spitfirehiphop.com/wp-content/uploads/2012/05/SFHH-Music-Page-Background9.png') repeat 73em fixed center;
}

If you only have one center it will center horizontally and at the top, if you have center center it will center both ways.

Size could have two sizes, if only one size then the other is auto as described here:-

http://www.w3schools.com/cssref/css3_pr_background-size.asp

although I'm not sure that the size (which is CSS3) is supported in the shorthand property in all browsers yet so you might have to use background-size: 73em; as a separate style as you did above.

Edited by Wickham

Share this post


Link to post
Share on other sites

Wickham, thank you for the response. I am new at this and am not a programmer. I am trying to figure it out on my own so that I learn how. I am not sure what information I left out, so forgive me.

I have a png/jpeg file that I would like to make the background and would like it to display evenly on each side of the "y" axis. Not sure if this helps anymore.

Share this post


Link to post
Share on other sites

I don't know ecactly what you want, but start with this (I left out the PHP code) and add to it. The background image centers in the window bit doesn't repeat.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test page</title>
<style type="text/css">
body {
background:url('http://www.spitfirehiphop.com/wp-content/uploads/2012/05/SFHH-Music-Page-Background9.png') no-repeat fixed center;
background-size: 73em;
}

#bglink{
display:block;
height:100%;
width:100%;
position:fixed;
left:0;
top:0;
z-index:0;
text-indent:-5000em;
}
</style>

</head>

<body>

<a href="http://www.datpiff.com/mixtapes-detail.php?
id=356052" id="bglink" target="_new">jump to 
http://www.datpiff.c...?id=356052/</a>

</body>
</html>

As I suspected, the new CSS3 size has to be a separate style; it didn;t work when added in the shorthand style.

Share this post


Link to post
Share on other sites

Wickham, thank you for your time. Maybe this explanation will help.

 

I am kind of one column in the middle of the page. On each side of the column you can see the background color. I would like to add a background (photo) evenly in that space. There are two about inches on each side.

 

The code that you provided will it allow this?

 

Thank you again!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×