Jump to content

Positioning A Bacground Photo


Jimy

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>

<?

}

Link to comment
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
Link to comment
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.

Link to comment
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.

Link to comment
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!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...