Centering header image

  • 9ds9

    (@9ds9)


    10 years, 2 months ago

    Can someone please advise me on how to enter the header background image on this site http://64.37.52.162/~ramsjoin/

    I cannot figure out how to centre the background image. Everything else is responsive and is centred. There is also a logo which I currently have set as a blank png image as I dont want to use the logo as it is part of the background image I have uploaded.

    Would really appreciate some help as I am a complete novice at css.
    Thanks you 🙂

    The header.php is as follows:

    <!DOCTYPE html <?php language_attributes(); ?>>
<html>

<head>
	<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <?php wp_head(); ?>

    <!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<script type="text/javascript" src="js/respond.src.js"></script>
        <script type="text/javascript" src="js/PIE.js"></script>
	<![endif]-->
</head>
<body>

<div class="home page_home center m_bottom_15" style="background:<?php echo vp_option('header_color'); ?> url(<?php
					if( vp_metabox('page_option.page_header_image') != '' ){
					echo vp_metabox('page_option.page_header_image');
					}else{
					echo vp_option('default_header');
					}
					?>)no-repeat;">
        <div class="container"> 

                 <div class="logo">
                <?php if( vp_option('logo') != ''){ ?>
                <a href="index.html"><img src="<?php echo vp_option('logo'); ?>" alt="logo" /></a>
				<?php } ?>

            </div>
            <!-- Start Navigation Menu -->
            <?php get_template_part('nav'); ?>
            <!-- Start Navigation Menu -->

            <?php if( vp_metabox('page_option.page_title') != ''){ ?>
            <div class="one m_bottom_0">
                <h1 class="header"><?php echo vp_metabox('page_option.page_title'); ?></h1>
            </div>
            <?php } ?>

            <div class="one">
            <?php if( vp_metabox('page_option.page_desc') != ''){ ?>
                <h2 class="summary"><?php echo vp_metabox('page_option.page_desc'); ?></h2>
            <?php } ?>
            </div><!--end one-->
            <div class="clear"></div>

            <?php if( vp_metabox('page_option.page_button') != '' ){ ?>
            <a>">
			<?php echo vp_metabox('page_option.page_button'); ?>
            </a>
            <?php } ?>

            <?php if( vp_metabox('page_option.page_title') == '' || vp_metabox('page_option.page_desc') == '' ){ ?>
            <div class="spacing-50"></div>
            <div class="clear"></div>
            <?php } ?>

        </div><!--end container-->
    </div><!--end home-->
    <div class="clear"></div>

    <div class="spacing-50"></div>

    [Moderator Note: Please post code or markup between backticks or use the code button. Or better still – use a pastebin. Your posted code may now have been permanently damaged by the forum’s parser.]

Viewing 6 replies - 1 through 6 (of 6 total)
  • esmi

    (@esmi)

    10 years, 2 months ago

    What theme are you using? Where did you download it from?

    Thread Starter 9ds9

    (@9ds9)

    10 years, 2 months ago

    I am using the finale elegant theme from: http://themesmarts.com/themes/finale-elegant-wordpress-theme/

    esmi

    (@esmi)

    10 years, 2 months ago

    I’m sorry but as you appear to be using a non-WPORG theme, you need to seek support from the theme’s developers – paid or otherwise. We only support themes downloaded from wordpress.org here.
    Try http://themesmarts.com/help-support/

    Thread Starter 9ds9

    (@9ds9)

    10 years, 2 months ago

    Ok cheers.

    Axel13

    (@axel13)

    10 years, 2 months ago

    I would suggest to add the header where the logo is and to do something like this with the style of the logo div.

    .container .logo {
   padding-top: 40px;
   margin-bottom: 55px;
   width: 940px;
   position: absolute;
   left: 50%;
   margin-left: -470px;
}

    the left margin should be 50% of the image width to get it in the middle.

    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    10 years, 2 months ago

    @axel13 Recycling something I posted the other day which I stole, er copied from someone else…

    Don’t edit the theme files directly, otherwise your changes will be overwritten when the theme is updated.

    An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

    As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.

    By leaving out the child theme or custom CSS option you’re giving out partial advice. Your CSS does address the styling problem but you really want to include the whole solution so’s other members don’t lose their work when the theme gets updated.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Centering header image’ is closed to new replies.