Baskerville Theme – Heading image – justify left?

jwjackson61 · Member · Nov 17, 2016 at 3:20 am
Copy link

Add topic to favorites
I’m using the Baskerville theme with a custom header image. When the screen is resized, the heading image is re-centered, with content cropped evenly off the left and right sides. I’d like the image I’ve chosen to crop only the right side, leaving the left margin always visible. Is there a way to do this?

I know I can use the “logo” feature but that’s above the title text and I want the image to be left of the title.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Nov 18, 2016 at 3:26 pm
Copy link
Hi, I’ve tried a few things with CSS with no positive results. The one thing I might suggest would be to try including your site title and tagline in the header image and see how that works. The one thing I see that will be an issue is to keep the image and the title visible on smaller screens.

The other possibility would be to create an image of your logo that is cropped tightly and then we could use CSS to add that image to the left of your site title/tagline. If you wish to give that a try, create that image and upload it to your media library and then post the URL of that image here and I’ll work on the CSS for you.
jwjackson61 · Member · Nov 18, 2016 at 9:23 pm
Copy link
I like the second idea, except that placing the image to the left of the title area might space the image too far away from the text. But I think it’s worth a try. Here’s a link to the image:
https://happyplanetrunning.files.wordpress.com/2016/07/14312745_xl-earth-running.jpg

I did consider your first idea, but I also like the clickable title and didn’t want to give it up.

Thanks for looking into this.
Jeff
thesacredpath · Member · Nov 21, 2016 at 3:52 pm
Copy link
Hi Jeff, I should have checked and mentioned this previously, but to apply custom CSS, such as what we will need for this, you would need the WordPress.com Premium Plan upgrade which includes the Custom Design feature.

You can try out and preview custom CSS before you buy as explained here. The following would be the CSS you would need.
```
.header-inner {
    background-image: url("https://happyplanetrunning.files.wordpress.com/2016/07/14312745_xl-earth-running.jpg");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 570px;
}
.bg-image {
    background-color: rgba(29, 29, 29, 0.001);
    background-image: none !important;
}
@media screen and (max-width: 600px) {
  .header-inner {
    background-position: center top;
    padding-top: 100px;
    background-size: 90px auto;
    width: auto;
  }
}
```
The above keeps the logo to the left of the title and tagline down to 601px in window/screen width. Below that, the logo centers above the title/tagline since space and alignment become an issue below 600px with it beside the title.

If you get the upgrade and decide to use this solution, you will probably want to redo your logo as a PNG with a transparent background. You would then replace the URL in the background-image declaration with the URL of that image.

No items found.