Center Header Image

Viewing 3 replies - 1 through 3 (of 3 total)

  • The background image in the header appears to be centered. At any rate look into the CSS properties for background – in particular background-position and background-size as these are typically used to “center” background images.

    • This reply was modified 6 years, 10 months ago by bemdesign. Reason: fixed CSS property name

    Hey Nikana,

    I’m not quite sure what you mean by ‘centering’ the header image.

    I think you are talking about the background image you are using in the header with the barbell and 3 pairs of legs standing on a podium.

    The reason why you are unable to shift this background image left or right is because it is using the CSS property background-size: cover.

    To get the functionality you want, you are going to want to use a different size other than cover. My suggestion is to use a percentage (like 100%). Then you can use the CSS property background-position-x to move the image left or right.

    Here is a video of me moving the image in my browser

    Here is a helpful link about background-size from CSS Tricks
    https://css-tricks.com/almanac/properties/b/background-size/

    I hope this helps.

    Frank

    Thread Starter nikana2000

    (@nikana2000)

    Thank you both for your valuable responses.
    I should have specified my inferior screen resolution, as it is not big enough to see the whole width of the image.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Center Header Image’ is closed to new replies.