Header Image across the top

[madruga]

Hello folks, I was wondering if it is possible to place a header image across the top of store in the section the logo is and how this can be done if possible. I'm looking for a way to beautify the store by removing much whitespace at the top. Thanks

[14Steve14]

It can be done. This is one way and there may be more. This works on an older version and does look like it should work on the latest version.

If you have not got it already copy the file templates/default/includes/components/header.php into your override template folder so the file is in the same location.

In header.php in the override folder change <div class="row"> to <div class="bgImgCenter row">

Then in your override templates CSS file add

Code: Select all

.bgImgCenter{
    background-image: url('your images location');
    background-repeat: no-repeat;
    background-position: center; 
    position: relative;
}

That should work. The css and the image size may need changing to get the look right on all device screens.

[madruga]

Thank you @14Steve14

I'll give this a try and see hw it works out. Should there not be image dimensions in this so as to avoid any distortion? Can you share a working example if any?

Thank you!

[14Steve14]

Give it a try as it is on your test site before adding it into your live site. You can then make changes as needed.

Fixing the size of an image can cause problems on different size devices. The css should enable the image to show correctly on all size devices. You can adjust the css if you wish as its only there as a guide and a place to start, but after making changes make sure you check how things look on different sized screens.