XF 1.5 Background image - how to position?

Spleen

Active member
Very new to this so grateful for Janet and John explanations (see Spot play with the big red ball, etc). I have a basic website with a main logo on the left hand side:

Screen Shot 2016-01-17 at 17.23.17.webp

And on the right hand side, using Style and Properties, Header, background image I have this:

Screen Shot 2016-01-17 at 17.23.01.webp

However I can't centre it and as you can see the front of the car is 'stuck' behind the nav bar. I can increase the size of the container using Settings and Height of Header Logo but that doesn't really work for what I want the image to look like. I want to centre it with a small amount of padding. Any ideas anyone? Thanks!
 
When you say "centre" you mean vertically?

I think you were right the first time, height of header ago should do what you want, just add pixels until the car sows above the navbar by the amount you want, presumably the same as the blue bit above the car.

Do check how this behaves reponsively also, I use the Firefox > Tools >Webdeveloper > responsive view to check this.

Because if it doesn't work on a mobile you'd probably want to rethink it anyway. The car will end up behind the logo I think.

EDIT: if you mean centre the background it horizontally (as well) that is in Stye properties > header & Navigation > header

Under background, you'll see position and type in center (note the spelling)
 
Here's what the whole header looks right now:

Screen Shot 2016-01-17 at 18.47.36.webp

I have this setting in background image:

Screen Shot 2016-01-17 at 18.50.59.webp
The only place I can find to change the size of the header is here:

Screen Shot 2016-01-17 at 18.54.29.webp
And when I change Height of Header Logo to 200px I get this:

Screen Shot 2016-01-17 at 18.48.59.webp

But I don't want to change the height of the header logo I want to move the background image around to fit the original header (container?) but at the moment whatever I do I can't seem to position it the way I want.
 
Here's what the whole header looks right now:

But I don't want to change the height of the header logo I want to move the background image around to fit the original header (container?) but at the moment whatever I do I can't seem to position it the way I want.

It doesn't actually change the dimensions of the image, it actually adds padding (or maybe margin).

I suggest you experiment with it and see if it does what you want.
 
I don't want to change the size of the image, (I can do that in PS) I want to able to position it where I want but I can't see where to do it. I want the image to be closer to the upper nav bar (the bar with 'Admin' in it) but I can't move it or rather I don't know how. At the moment the distance of the logo and the image to the upper nav bar is the same.
 
Ok, I'm trying a different graphic. When I populate the relevant data and leave the position blank like this:

Screen Shot 2016-01-17 at 20.30.57.webp

I get this:

Screen Shot 2016-01-17 at 20.30.41.webp

But when I populate the Position with 'right' I get this:

Screen Shot 2016-01-17 at 20.31.23.webp

It moves across to the right fine enough but it drops down and leaves a gap between the image and the upper nav bar. What am I doing wrong?
 
In Photoshop enlarge the canvas adding transparent area to the left so your image is the same width as the forum, ( looks like it would be about double its current width) then use center or blank in the box in style properties
 
Thanks, tried the canvas thing but it didn't work so well. Anyway, after extensive fiddling and searching I discovered taht putting '100% top' in Position the car image now sits neatly on the right hand side. Accident more than design on my part.

Screen Shot 2016-01-17 at 23.51.57.webp
 
Top Bottom