Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I have to add a banner to the right side of my wordpress site but the theme does not have any banner widget area. I want the banner to be aligned right in the header beside the logo. It should look like this:

http://wptest.journeytowebsite.com/wp-content/uploads/2013/03/banner-1.png

I was able to accomplish this with these new div id and style:

<div id="header_banner">
<img id="banner_photo" src="http://wptest.journeytowebsite.com/wp-content/uploads/2013/03/Banner-Picture.png" alt="picture banner ?>" /> </div>

> #header_banner {   width:100%; margin:20px auto;   }     
> #banner_photo {  
>     margin-left: 800px;   
>     margin-right: none;
>     position: absolute;
>     float:none;  
>     width:auto;   }

I put these code snippets in header.php and style.css files respectively, but the problem is, whenever I change the size of my browser window or maximize it, the position of the banner changes and occupies different positions in the header like this photo:

http://wptest.journeytowebsite.com/wp-content/uploads/2013/03/banner_unfixed.png

Please suggest me any help to resolve this problem. Also, consider that I am completely new with coding and more comfortable with plug ins and built in options. Thanks in advance.

share|improve this question
add comment

2 Answers

<div id="page" class="hfeed site">
    <header id="masthead" class="site-header" role="banner">
        <hgroup>
            <h1 class="site-title"><a href="http://wptest.journeytowebsite.com/" title="I test wordpress" rel="home">I test wordpress</a></h1>
            <h2 class="site-description">Just another WordPress site</h2>
        </hgroup>

Put your banner after this, it has to be inside your header wrapper, then style it from there

share|improve this answer
add comment

Try adding this to style.css

body .site{
background: url("http://wptest.journeytowebsite.com/wp-content/uploads/2013/03/Banner-Picture.png") no-repeat scroll right top #FFFFFF;
}

After removing this code of yours

<div id="header_banner">
<img id="banner_photo" src="http://wptest.journeytowebsite.com/wp-content/uploads/2013/03/Banner-Picture.png" alt="picture banner ?>" /> </div>

And dont forget to clear the browser cache after doing these updates

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.