Hello

Setting your image to 100% on both height and width will cause your image to distort and have incorrect ratios on most screen sizes. As screensizes vary so much it is impossible to have a one size fits all without either cropping, letter boxing or distorting the image.

I would suggest the following article which details how to hide the component/article area of your template which will remove some of the scroll and whitespace... https://joomla51.com/tutorials/item/hiding-the-component-article-area-on-a-page

Ciarán

Hi Ciarán!

I love my customer... I'm not done The background is still not perfect, it's good but not perfect... the words of my customer...

"The background image should always fit into the display"... This means, independent of the screen resolution, the background image should be completely visible. Height and width should be 100% of the screen resolution.

My screen resolution: 1680 x 1050px
Taking a look into my project, it seems that the slideshow is a little bit to high and therefore I'm getting a scrollbar. Scrolling down a little bit, I'm seeing the rest of the background image (a beach and some waves). I've reduced the height of the slideshow until the scrollbar disappears. Now, half of my background image is gone.

What my customer would like to have: The "Home" page should only contain the main menu, the slideshow with a few pictures, the background image in full size and NO scrollbar. All other pages could have a scrollbar but the background images should always be fully visiable. I think it could be a problem if there is a scrollbar and the background picture is getting larger and larger and distorted because of "100% height". Maybe the background image should remain fixed, optimised for the screen resolution...the background image is not scrolling.

You can see the current custom CSS a few postings above and I attached a screenshot to explain what I exactly mean.

Do you understand what I mean? English is not my native language, so it's a little bit hard to eplain.

Thank you for your help and assistance!

Hi Ciarán!

AHHHHHH.... NICE

Thank you and kind regards!
Manfred

Hello

You can add the suggested CSS to the end of the CSS in your post.

Ciarán

Hi Ciarán,

There is already this style within the custom css. Here is the content of custom css:

#container_main .wrapper960 {

    background-color: transparent;

}



#container_header-sticky-wrapper {

    position: relative;

    top: 0;

    z-index: 1;

} 



#body_panel {



    background-image: url("https://www.twisst-mocktails.com/xnewweb/images/web/beach_bg.jpg");

    background-size: cover;



}



#container_slideshow {

    background-color: transparent;



} 



#container_header_slide, #container_header {

    opacity: 0.8;

}



#container_header-sticky-wrapper {

    top: 20px;

}



#container_slideshow {



    padding-top: 64px;



}



.hornav > ul > li.active {



    border-bottom: 1px solid #ffffff;



} 



.hornav > ul > li:hover {



    border-bottom: 1px solid #ffffff;



} 



.hornav > ul {

    width: auto;

}

.hornav > div {

    display: inline-block;

    width: auto;

}

Kind regards,
Manfred

Thank you Manfred

Appears we were looking at the wrong site

To amend try adding the following to the Custom CSS field of your templates parameters...

#container_header-sticky-wrapper {

    top: 0;

} 

Ciarán

Hi Ciarán,

Browser: FireFox and IE



The green main menu bar is a few pixel displaced downwards and you see a white bar on top. Scrolling down, the white white bar disappears.

Kind regards,
Manfred

Hi Manfred

So we understand you correctly could you include a screenshot of the white bar in question?

Ciarán

Hi Ciarán,

The main menu is now clickable but it slipped a little bit downwards and a white bar is now visible on the top.

Manfred

Happy to help!

To amend try adding the following to the Custom CSS field of your templates parameters...

#container_header-sticky-wrapper {

    position: relative;

    top: 0;

    z-index: 1;

} 

Ciarán

I've just found a little bug!? When you open the website, the navigation (including the flags) are visiable but you can not click it. You need to scroll down a little bit and the menu and language flags active / possible to click. Something is overlaying the menu !?

Kind regards,
Manfred

Hi Ciarán!

Only one word: Awesome! Your support is fantastic !!!!!!! Never seen that before....

A very very satisfied customer,
Manfred

Thank you

I have edited your template to also load the 'hornav' module position along with your main menu.

To set a background image try adding the following to the Custom CSS field of your templates parameters (edit to taste)...

#body_panel {

    background-image: url("https://www.twisst-mocktails.com/xnewweb/images/web/beach_bg.jpg");

    background-size: cover;

}

#container_slideshow {

    background-color: transparent;

} 

Ciarán

Hi Manfred

By default these options are not available however if you can send temporary administration access to your Joomla installation to info@joomla51.com and we will examine the possibility further. For our reference please paste a link to this post in your email.

Ciarán