Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 06-07-2012, 12:03 AM   PM User | #1
araah
New Coder

 
Join Date: Jun 2012
Posts: 14
Thanks: 1
Thanked 0 Times in 0 Posts
araah is an unknown quantity at this point
pagewrap help

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

<?php
/**
* 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(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php
/*
* 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' );

?></title>
<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' ); ?>" />
<?php
/* 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.
*/
wp_head();
?>
</head>

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

<div id="pagewrap">

<h1>
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
</h1>
<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
araah is offline   Reply With Quote
Old 06-07-2012, 01:03 AM   PM User | #2
waxdoc
Regular Coder

 
Join Date: Jul 2008
Posts: 155
Thanks: 9
Thanked 13 Times in 13 Posts
waxdoc is an unknown quantity at this point
Re the CSS

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-p...kground-image/ As CSS Tricks noted

Quote:
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")

Last edited by waxdoc; 06-08-2012 at 02:57 AM.. Reason: forgot A for alpha in rgbA
waxdoc is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 10:52 PM.


Advertisement
Log in to turn off these ads.