Moving image in header

Hi Liam,

1. Have you tried setting the Header alignment to "Right" in "Appearance > Customize > Layout"?

2. You can do this using the Backgrounds add-on.

First, create a semi transparent (with your desired opacity) 4x4 pixel square in Photoshop, then save it as a PNG (with transparency).

Then, go to the Colors area of the Customizer and remove the content background color.

Next, upload the 4x4 image as the content background image, and make sure it's set to repeat.

Let me know if that works or not :)

Hi Tom

Many thanks for the reply,

With regards to the images i have added the main logo under the 'Header Content' and then centered this under Layout - Header Alignment - Centre which is fine. I then add the other image as a back ground image (i have purchased the premium pack which by the way is just fab!) under the header option and have set this to no repeat and contain. I cant see an option to be able to move this though? Am i missing something here?

As for the transparency query i will give that a go tonight so thanks for that much appreciated.

One last thing as well, with the default home page whats the best way to remove the sidebars next to the main page without setting the home page to being static?

Thanks again for all your help and sorry for my beginner type questions

Just an update on the above, i am having a few issues trying to create a transparent background. I dont have access to photoshop so have tried to use paint.net. Not sure if i am doing it right but cant seem to get the background to be transparent. I have tried setting the content background with the 4x4 image i created but it didnt seem to work :( Not sure if its because the content background colour is white.

Was just hoping that by having a semi transparent content background it would allow for the body background to be visible still behind it

Hi Liam,

You're trying to move the background image? You may need to write some CSS for that using the background-position attribute: http://www.w3schools.com/cssref/pr_background-position.asp

Something like:

.site-header {
      background-position: 10px 10px;
}

Would move the background header down and to the right 10px.

You'll definitely have to remove the background color from the content area. Go to "Appearance > Customize > Colors > Content Colors" and delete the value from the Background color (top option).

That should do it :)

Hi Tom

Thanks for the response again, i think its me not being very clear to you so my apologies there. If you look at the picture from the first post you can see the 'About' content has a solid white background (dont worry about the image in there though). What i was hoping for was for all the content boxes to have a semi transparent background so that the main body background (blue background with the clouds in the first image) would be visible instead of the white background of the content box.

Does that make sense? Really sorry for my beginner terminology here

Cheers

Hi Tom

Just so you know i have managed to remove the white background colour of the content box so all is well there now :)

Still having a slight issue though with the header background image always going off to the left. I notice there is a 'position x/y' tab under the header section in background images not to sure what i need to enter in there in order to move it to where i want or if i can even do this from this menu?

One last thing, i really like the social media icons that display on the default genertae press image on the website in the top right corner. Are they just widgets or are they setup as a second menu or something?

Cheers Tom

The position x/y input can accept these parameters: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

This is the plugin used to display the social icons: https://wordpress.org/plugins/lightweight-social-icons/

Let me know if you have any more questions :)

Thanks Tom, got to the bottom of the X and Y postion with your help so thanks a lot for that.

Just tried setting a page header image as a test for my homepage. Settings are below. Having a few issues though

[url=http://imgur.com/8iKtP9B][img]http://i.imgur.com/8iKtP9B.png[/img][/url]

[url=http://imgur.com/5HDlbvP][img]http://i.imgur.com/5HDlbvP.png[/img][/url]

But the image keeps coming out like this

[url=http://imgur.com/1MbfFBQ][img]http://i.imgur.com/1MbfFBQ.png[/img][/url]

I just cant work out why the image is coming out the way it is. Am i doing something wrong here?

Thanks again

The background image for the page header is set to cover.

You can remove that setting with this CSS:

.generate-page-header.generate-content-header {
      background-size: auto;
}

Excellent thanks Tom, where do i actually add this line if you dont mind me asking? I have never done coding before so not to sure where it lies.

Thanks again

This article should help: http://generatepress.com/knowledgebase/adding-css/

Is it poosible to make a transparent header through the customizer or will I use CSS?

MM

Hi there,

Using the Colors add-on you can remove the header background color (making it transparent).

If you want a semi transparent header (opacity), you'll have to create a 4x4 pixel image in Photoshop (or something similar), and give it your desired opacity. Save it as a PNG, and upload it as the header background image (using the Backgrounds add-on).

Be sure to remove the header background color either way.

Hope this helps :)