Page 1 of 1
Header Image across the top
Posted: Fri Sep 19, 2025 1:55 pm
by 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
Re: Header Image across the top
Posted: Sat Sep 20, 2025 10:30 am
by 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.
Re: Header Image across the top
Posted: Sat Sep 20, 2025 11:00 am
by 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!
Re: Header Image across the top
Posted: Sat Sep 20, 2025 11:44 am
by 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.