Putting and image in the Upper Right Corner

Support Area Forums Forward Putting and image in the Upper Right Corner

Viewing 4 posts - 1 through 4 (of 4 total)
URL to the page in question: http://585.ce4.myftpupload.com/
  • Author
    Posts
  • #33640
    Peter Roach
    Participant

    Hi Bill,

    We are wondering if you could provide guidance on how best to position an image in the upper right corner above the menu. We found the look of the site (attached image) compelling. You had prior told me how to place buttons in that area and I’d like to put the buttons onto of an image in that area. Would that be possible?

    Thanks,
    PR

    #33650
    Bill Robbins
    Moderator

    Hi Peter,

    Thankfully you can add a background image to just about any HTML element with CSS. What you could do is make a background image in Photoshop and export it as a PNG or JPEG file. Then go to your WordPress media library and upload it there. If you click on a file in the media library, WordPress will give you the URL to that file. Copy it.

    Then add something like this to your Custom CSS:

    
    #header {
    	background-image: url(https://yoursite.com/image.png);
    	background-repeat: no-repeat;
    	background-position: top right;
    }
    

    Just replacing the http://yoursite.com/image.png with the URL you copied earlier. That would add a background image to the top right of the header.

    Hope that helps get you pointed in the right direction.

    Bill

    #33658
    Peter Roach
    Participant

    Thanks Bill! I greatly appreciate your timeliness and expertise. I’ll start to play around with that functionality. I also want to add couple buttons to that area. I have the buttons in place and can not add a space between the two inplace. I’ve tried

    Here’s the code block and I’ve tried adding echo or /l/n with no luck.

    <div id=”extra-content” class=”clearfix”>
    <?php echo do_shortcode( ‘[maxbutton id=”16″]’); ?>

    <?php echo do_shortcode( ‘[maxbutton id=”15″]’ ); ?>
    </div>

    #33663
    Bill Robbins
    Moderator

    To move the buttons there around, you’ll probably need to add a bit of CSS to them. Something like this would create a bit of a gap between the top and bottom ones:

    1. Go to the Appearance section in your WordPress dashboard and click on Customize.
    2. Look down for the advanced section and click on it. Then choose Custom CSS.
    3. In the box there, add this:
      
      #extra-content span.maxbutton-16-center {
      	margin-bottom: 10px;
      }
      
    4. Save your changes.

    Have a great night Peter

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Putting and image in the Upper Right Corner’ is closed to new replies.