1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.5 Background image - how to position?

Discussion in 'Styling and Customization Questions' started by Spleen, Jan 17, 2016.

  1. Spleen

    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.png

    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.png

    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!
  2. Mr Lucky

    Mr Lucky Well-Known Member

    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)
  3. Spleen

    Spleen Active Member

    Here's what the whole header looks right now:

    Screen Shot 2016-01-17 at 18.47.36.png

    I have this setting in background image:

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

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

    Screen Shot 2016-01-17 at 18.48.59.png

    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.
  4. Mr Lucky

    Mr Lucky Well-Known Member

    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.
  5. Spleen

    Spleen Active Member

    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.
  6. Spleen

    Spleen Active Member

    I want it to look something like this (made in PS):

  7. Spleen

    Spleen Active Member

    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.png

    I get this:

    Screen Shot 2016-01-17 at 20.30.41.png

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

    Screen Shot 2016-01-17 at 20.31.23.png

    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?
  8. Mr Lucky

    Mr Lucky Well-Known Member

    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
  9. Spleen

    Spleen Active Member

    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.png

Share This Page