Putting and image in the Upper Right Corner
URL to the page in question:
http://585.ce4.myftpupload.com/
-
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
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
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>
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:
- Go to the Appearance section in your WordPress dashboard and click on Customize.
- Look down for the advanced section and click on it. Then choose Custom CSS.
- In the box there, add this:
#extra-content span.maxbutton-16-center {
margin-bottom: 10px;
}
- Save your changes.
Have a great night Peter
- The topic ‘Putting and image in the Upper Right Corner’ is closed to new replies.