How to make Header bg image center and no repeat?

sgandkg

Jumping back into Joomla after many years away from it (and any design)

In JA Simpli 1.0.6 I am trying to set the Header image to be centered, not repeat, and box fit image.
custom.css in CSS folder includes:
#header.stick-on-top {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
z-index: 21;
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
}

But the image is still repeating. I have tried putting this in the Admin backend template Edit Advanced-Custom code but it just shows the code text at the top of the page.

Any ideas?

Thanks!

saguaros

Hi sgandkg

The header element doesn't have that 'stick-on-top' class, you can try this instead:

#header{
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
z-index: 21;
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
}

sgandkg

Hello saguaros,

Nope, still repeating when I put that in the custom.css
And adding to back-end template custom code still just pastes that code across the top, not sure how that's supposed to work.

saguaros

sgandkg Could you share the admin account so I can take a look?

sgandkg

Sure - can't find a way to PM you...?

saguaros

sgandkg You can edit Fields in your first post so only Moderator can see:

sgandkg

Fields added, thanks!

saguaros

sgandkg Maybe cache on your browser? as I don't see the background image repeated now.

sgandkg

Odd, I tried opening in different browser on different computer before because of that and wasn't working but is now. Thank you!

Now how can I make it taller to fit entire height of the pic? It cuts off about half...

saguaros

Hi sgandkg

I think it's better to edit your image to have a proper size, currently its quite small and when you use css to position + enlarge to fill the large screen size, it will not look good.

sgandkg

The header image is 1500x760 at 72 and looks great full size when opened locally. If I change custom.css to background-size: contain it shows the whole image but tiny to fit the vertical.
We're modifying the image to make it less tall to allow for wider, but would still like the template "Header" block containing Header Left and Header Right (banner-top) to be taller. Is there a way to change that?

saguaros

sgandkg

You can add custom css to force the height for the header with your desired value:

#header {
    height: 100px;
}

sgandkg

Thought I tried that but didn't re-save the custom.css :-P Sorry abou that.
Looks great now, thank you for your help!!