View Full Version : pagewrap help

06-07-2012, 12:03 AM
Hi im having difficulty changing the colour of my foreground. I know how to change the colour of the main background but dont know how to change it on the 'foreground' i think it is called, where all the content is going to be.

So i have a pagewrap in place so my website will have a max width of 960px and so all of the information will be contained in this pagewrap. But how do i change the background so the content within the pagewrap will be white instead of an repeating image which my background currently is.

Here is my header.php coding: and yes i am editing a 'naked' blank theme

* The Header for our theme.
* Displays all of the <head> section and everything up till <div id="main">
* @package WordPress
* @subpackage Starkers
* @since Starkers 3.0
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
* Print the <title> tag based on what is being viewed.
* We filter the output of wp_title() a bit -- see
* twentyten_filter_wp_title() in functions.php.
wp_title( '|', true, 'right' );

<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
/* We add some JavaScript to pages with the comment form
* to support sites with threaded comments (when in use).
if ( is_singular() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );

/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.

<body <?php body_class(); ?>>

<div id="pagewrap">

<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
<p><?php bloginfo( 'description' ); ?></p>

<div id="access" role="navigation">
<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
<a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ?></a>
<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
</div><!-- #access -->

AND HERE IS whats in the style.css

@import "css/reset.css";
@import "css/typography.css";
@import "css/layout.css";

body {background-image: url(ftp://b4_10826358@ftp.byethost4.com/azizur.totalh.net/htdocs/wp-content/themes/AzizurTest/images/woodTexture5.png);}
#pagewrap {width: 960px; margin: 0 auto;}

also i would like the content area to increase in heigh depending on how much content is on that web page, so i dont want it fixed, which is why i cant use an image

Help would be appreciated
Thank you

06-07-2012, 01:03 AM
I do not have access to server-side scripting (PHP) so hope I'm not missing any of your points.

But some basic CSS points to note: The COLOR property is your "foreground" and applies to text and border (if no border-color is set).

You might look into new CSS3 properties background-size and background-origin [see for example http://www.w3schools.com/css3/css3_backgrounds.asp or http://www.css3.info/preview/background-size/ or http://css-tricks.com/perfect-full-page-background-image/ As CSS Tricks noted

We can do this purely through CSS thanks to the background-size property now in CSS3. We'll use the html element (better than body as it's always at least the height of the browser window). We set a fixed and centered background on it, then adjust it's size using background-size set to the cover keyword.

html { background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; }

The background "shorthand" above includes background-repeat and background-position (which your CSS did not show).
With your background-image set for HTML selector, the BODY selector
could have background: transparent; or semi-transparent
background-color: rgba(255,255,255, 0.25); and
#PAGEWRAP background-color: white; or 75% semi-transparent white background-color: rgba(255,255,255, 0.75);
and use color: black (or whatever) for the text ("foreground")