Jimy Posted June 15, 2012 Report Share Posted June 15, 2012 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> <? } Quote Link to comment Share on other sites More sharing options...
Wickham Posted June 15, 2012 Report Share Posted June 15, 2012 (edited) 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 June 15, 2012 by Wickham Quote Link to comment Share on other sites More sharing options...
Jimy Posted June 15, 2012 Author Report Share Posted June 15, 2012 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. Quote Link to comment Share on other sites More sharing options...
Wickham Posted June 15, 2012 Report Share Posted June 15, 2012 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. Quote Link to comment Share on other sites More sharing options...
Jimy Posted June 15, 2012 Author Report Share Posted June 15, 2012 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! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.