Header image repeat?

  • jawin

    (@jawin)


    14 years ago

    Hi,

    I am trying to make header image repeat horizontally repeat-x in Cutline theme here are the required codes:

    Header.php 

    <div id="header_img">
		<img src="<?php header_image() ?>" width="970" height="55" alt="" />
		</div>

    Styless.css 

    #header_img { position: relative; margin: 0 0 3.0em 0; border-bottom: 1px solid #000; float: left; clear: both; }

	#header_img img { display: block; } /* this is really just an IE 6 and 7 hack in disguise */

    function.php

    <?php

$themecolors = array(
	'bg' => 'ffffff',
	'text' => '000000',
	'link' => '0060ff'
);

// No CSS, just IMG call

define('HEADER_TEXTCOLOR', '');
define('HEADER_IMAGE', '%s/images/header.gif'); // %s is theme dir uri
define('HEADER_IMAGE_WIDTH', 970);
define('HEADER_IMAGE_HEIGHT', 55);
define( 'NO_HEADER_TEXT', true );

function cutline_admin_header_style() {
?>
<style type="text/css">
#headimg {
	height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
	width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
}

#headimg h1, #headimg #desc {
	display: none;
}

</style>

    what changes i have to make in order to make header image repeat-x

    Thanks for ur help.

    Best Regards

Viewing 3 replies - 1 through 3 (of 3 total)
  • Michael

    (@alchymyth)

    repeat-x only works for background images:
    https://www.w3schools.com/css/css_background.asp

    you could use a graphics program to make a header image that will fit the available space.

    jtlowe22

    (@jtlowe22)

    If you want to repeat it horizontally, apply the image as a background image to the header. I would still leave the header img in the header div, but I would hide it. This would allow the viewer to see the image if stylesheet was disabled. Something like:

    /* header code */
    <div id=”header_img”>
    <img src=”<?php header_image() ?>” width=”970″ height=”55″ alt=”” />
    </div>

    /* style code */
    #header_img { position: relative; margin: 0 0 3.0em 0; border-bottom: 1px solid #000; float: left; clear: both;
    background: url(path/to/image/header.gif) repeat-x; height:55px; width:970px; }

    #header_img img { display: none; /*this hides the image*/}

    Thread Starter jawin

    (@jawin)

    @jtlowe22
    @alchymyth

    Thank, Thanks…..Thanks…

    Regards

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Header image repeat?’ is closed to new replies.