Joomla! 3.6.2 Purity III 1.1.7

I have created custom.css file in /purity_III/default

In it I put this code:

.page-masthead .jumbotron.jumbotron-primary {
    background: url("/images/norwegia.png") no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

But, the image does not look nice. I do not see all the image. I need correct height. Please help me with this.

the website is norwegia1.pl

  • This is a responsive theme. If you use cover, you will never be able to show the full image for all screen widths as the size of the image will always be changing. Sep 28, 2016 at 13:37

2 Answers 2


Because this theme is responsive, the size of the masthead will always be changing. There is no single width/height combination that will always work.

What you need to do is rebuild your image to cover the largest possible dimensions without being stretched. From my tests, the largest height was 258px.

Then you need to position your critical image elements so they fit inside the smallest possible dimensions. From my tests, that height was 166px.

For the width, you just need the image wide enough to display all of the pictures. But, make sure the pictures are there in full (don't crop/cut, except on the bottom, if you like). Take the image width a little larger and end the image with a solid color. It looks like you are using a gradient in your image with the far right color being #78849c.

Now, instead of using cover, you just set the background image with a position of the bottom left without repeating and set the background color to match the background color in your image. This way, the image appears to stretch the full width of the page, but instead, your CSS color is actually extended beyond the image.

Final CSS code will look like:

.page-masthead .jumbotron.jumbotron-primary {
    background: #78849c url("/images/norwegia.png") no-repeat left bottom;

Now, as your masthead changes sizes, parts of the image may get hidden, but that is the extra parts that don't matter. The core content of your image will always be displayed.



.jumbotron.jumbotron-primary {
    height: 380px;
  • Because the theme is responsive, this won't work for all widths. Sep 28, 2016 at 13:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.