How do I change the background of my wordpress theme? (7 posts)

  1. brandingpeople
    Posted 4 years ago #

    Okay. I'm pretty good at editing the shortcodes and editing via the customizing tools the theme author gives you. However this theme is giving me a hardtime. I'm trying to edit the creme area of this theme. I've so far edited it from




    Please help

  2. Joshua
    Posted 4 years ago #

    It should be a CSS issue.

    CSS is fairly easy to understand just do a search for "background" and change it.

    The css file should be in the theme menu.

    As an example, your theme (assuming it is unedited) has a 3 part background, excluding the nav. The first tag you are looking for is
    body{color:#4D4946;font:13px/1.5 Georgia,Helvetica,Arial;background:url('http://themes.dapurpixel.com/velvet/themes/velvetsky/css/../img/vs-bg-main.png') no-repeat scroll center 77px #241706;text-align:left}
    Change background:url to the url you want. The rest is similar, find the tags and edit them.

  3. brandingpeople
    Posted 4 years ago #

    Great advice! i appreciate! However, I did just that and ITS STILL hasn't budged! :(

    Here's the actually code:

    define('HEADER_TEXTCOLOR', 'ffffff');
    define('HEADER_IMAGE', '%s/images/default-header.jpg'); // %s is the template dir uri
    define('HEADER_IMAGE_WIDTH', 940); // use width and height appropriate for your theme
    define('HEADER_IMAGE_HEIGHT', 156);
    add_custom_image_header('ess_header_background', 'ess_admin_header_background');
    function ess_header_background() {
    	<style type="text/css">
            #header .wrap{
                background: url(' <?php header_image(); ?> ');
    function ess_admin_header_background(){
        ?><style type="text/css">
            #headimg {
                width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
                height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;

    And I'm trying to change that cream part to this:


    My first thoughts were to change a color hex tag but I don't think its that.

    If you or anyone could help me. I thought I was pretty good at this.

  4. brandingpeople
    Posted 4 years ago #

    I've tried to replace the new url with different areas above where there was

    background: url(' <?php header_image(); ?> ');
  5. brandingpeople
    Posted 4 years ago #

    Even here on the 'theme-options.php'

    As shown here:

    // Hooking styling for Theme Option page
    add_action('admin_head', 'ess_admin_header');
    function ess_admin_header(){
    	global $menu;
    		if ((isset($_GET['page']) == 'essential_options') ) : ?>
    			#icon-essential_options{ background:url('http://www.teacakeculture.com/wp-content/uploads/2011/09/bottom_background.png;) no-repeat; }
    			.essential-options .form-table	{background:#efefef; margin:0 0 40px 0;}
    			.essential-options tr		{display:block; background:#f7f7f7; margin:10px;}
    	<?php 	endif;
  6. Joshua
    Posted 4 years ago #

    To the best of my knowledge you can't put PHP in CSS, so you will need to use the location of the file.

    You can use relative links, however I am partial to the full physical link. for example http://www.example.com/wp-content/uploads/bg.png

    To save you the time replace `#body .wrap {*snip*} in the CSS file, assuming the "cream bit" is the post body, with the code below.

    #body .wrap {
    background: url('http://www.teacakeculture.com/wp-content/uploads/2011/09/bottom_background.png');

    As a further note when they say put code in backticks they mean these not "backticks" (the backtick is found on the top most left key on your standard US keyboard.
    Also blocks of code longer than about 5 lines are expected to be put in Pastebin

  7. Fixed the backticks.

    You can't put PHP code in a CSS file, but you CAN link to a php FILE as a background URL if you wanted to.

Topic Closed

This topic has been closed to new replies.

About this Topic