Forums

WordPress › Support » Themes and Templates

Background image code (5 posts)

  1. HeadCoder
    Member
    Posted 8 months ago #

    Hi,

    First of all, sorry if my thread is in the wrong category, it's my first time here ^^ .

    I'm using a Javascript code to add a background image to my blog.

    <!-- In my <head>: -->
<script src="http://www.coding-by-head.org/bgMax.min.js" type="text/javascript"></script>
<!-- before the </body> : -->
<script type="text/javascript">
var options = {
	position : "fixed"
};
bgMax.init("http://www.coding-by-head.org/wp-content/uploads/2012/09/london_street-wallpaper-2560x1440_bw.jpg", options);
</script>

    As you can see, I have to type manually the URL of my image. I would like to use the PHP variable (or something else if it's not a variable) used by WordPress to write this HTML code:

    <style type="text/css" id="custom-background-css">
body.custom-background { background-image: url('http://www.coding-by-head.org/wp-content/uploads/2012/09/whatevertheimageis.jpg'); background-repeat: no-repeat; background-position: top left; background-attachment: fixed; }
</style>

    So I would like to know how WordPress marks the URL of the background image.

    I only have found that it is makes trought the wp_head() function but when I look for this function in generate_template.php, I don't find what I'm looking for (the HTML code). I searching for few minutes now and still don't find it.

    Does anyone know where this html code is in the WordPress files (or what is the PHP code that is about it)?

    Thank you in advance!

    HeadCoder.

    P.S: In case if you need to know, my wordpress project is located there: http://www.coding-by-head.org/ .

  2. Andrew Nevins
    Volunteer Moderator
    Posted 8 months ago #

    You could remove the http://www.coding-by-head.org/ and replace with a forward slash.
    E.g

    bgMax.init("/wp-content/uploads/2012/09/london_street-wallpaper-2560x1440_bw.jpg", options);

  3. HeadCoder
    Member
    Posted 8 months ago #

    I'll do it! Thank you for the advice!

    But it doesn't respond completely to my need. I meant, I need to declare the file's path in another way than manually. The reason is that if I want to publish my theme for other people, I don't want them to type manually the path of the file (I want them to customize their background via the Administration Panel and not via the source code of the template).

    If the background image is registered in the SQL database, I was wondering if there was another possible method instead of making an SQL request to the database to get the image's path.

  4. HeadCoder
    Member
    Posted 8 months ago #

    After a research, I finally found the code:

    function get_background_image() {
	return get_theme_mod('background_image', get_theme_support( 'custom-background', 'default-image' ) );
}
// few lines under
function _custom_background_cb() {
	// $background is the saved custom image, or the default image.
	$background = get_background_image();

	// $color is the saved custom color.
	// A default has to be specified in style.css. It will not be printed here.
	$color = get_theme_mod( 'background_color' );

	if ( ! $background && ! $color )
		return;

	$style = $color ? "background-color: #$color;" : '';

	if ( $background ) {
		$image = " background-image: url('$background');";

		$repeat = get_theme_mod( 'background_repeat', 'repeat' );
		if ( ! in_array( $repeat, array( 'no-repeat', 'repeat-x', 'repeat-y', 'repeat' ) ) )
			$repeat = 'repeat';
		$repeat = " background-repeat: $repeat;";

		$position = get_theme_mod( 'background_position_x', 'left' );
		if ( ! in_array( $position, array( 'center', 'right', 'left' ) ) )
			$position = 'left';
		$position = " background-position: top $position;";

		$attachment = get_theme_mod( 'background_attachment', 'scroll' );
		if ( ! in_array( $attachment, array( 'fixed', 'scroll' ) ) )
			$attachment = 'scroll';
		$attachment = " background-attachment: $attachment;";

		$style .= $image . $repeat . $position . $attachment;
	}
?>
<style type="text/css" id="custom-background-css">
body.custom-background { <?php echo trim( $style ); ?> }
</style>
<?php
}

    I don't really know how to do what I want now... echo $background and echo get_background_image don't work also...

  5. benyafai
    Member
    Posted 5 months ago #

    If still required, this works:

    Add this to functions.php:
    add_theme_support( 'custom-background' );

    And once you have chose your image, this should bring up the direct URL.
    <?php echo (get_background_image()); ?>

Reply

You must log in to post.

About this Topic

Tags