Joomla Templates Club 406,261 posts

[EG Friend EGJoin date: March 2014Posts: 66Downloads:54Uploads:13 Thanks: 13 Thanked: 2 times in 2 posts]

#868207

Hello,

I would like to change the size of the picture in background on homepage. Like on the demo if we resize the window of the web navigator, we only see a part of this picture. I want we see all the picture irrespective of the size of the window. How can I do that ?

Thanks a lot for your help,

EG

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#868564

Hi,

You can make the responsive the background home with my tweak below

Create templates/ja_social_ii/css/custom.css file and add new the CSS style

@media  (max-width: 767px) {
    body.features-page .features-bg {
        background-size: 100% 100%;
    }
}

@media  (min-width: 768px) and (max-width: 979px) {
    body.features-page .features-bg {
        background-size: 100% 100%;
    }
}

Regards

[EG Friend EGJoin date: March 2014Posts: 66Downloads:54Uploads:13 Thanks: 13 Thanked: 2 times in 2 posts]

#868706

I’m sorry, I see Ninja Lead has answered to my post but I can’t see his answer ? Is it a bug of the forum ?

[EG Friend EGJoin date: March 2014Posts: 66Downloads:54Uploads:13 Thanks: 13 Thanked: 2 times in 2 posts]

#868736

This reply has been marked as private.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#869391

Try this solution :

• Open templates/ja_social_ii/css/features.css file

find and change

body.features-page .features-bg {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
}

to

body.features-page .features-bg {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  background-size: 100% !important;
}

[EG Friend EGJoin date: March 2014Posts: 66Downloads:54Uploads:13 Thanks: 13 Thanked: 2 times in 2 posts]

#870067

Thanks, it works !

However how can I do to remove the grey zone ? I want keep the same size for the picture but without the grey space.

Thanks for your help,

EG

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#870436

Try to open templates/ja_social_ii/css/features.css file again

find and change

body.features-page .features-bg .mask {
  background: rgba(0, 0, 0, 0.4);
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 2;
}

to

body.features-page .features-bg .mask {
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 2;
}

[EG Friend EGJoin date: March 2014Posts: 66Downloads:54Uploads:13 Thanks: 13 Thanked: 2 times in 2 posts]

#870858

This reply has been marked as private.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#871309

Hope the CSS style below will help you to fix this bug

Create templates/ja_social_ii/css/custom.css file and add new the CSS style

@media  (min-width: 768px) and (max-width: 1024px) {
    #t3-content {
        padding-top: 127.067px !important;
    }

    #t3-features-intro {
        margin-top: 450px !important;
    }
}

[EG Friend EGJoin date: March 2014Posts: 66Downloads:54Uploads:13 Thanks: 13 Thanked: 2 times in 2 posts]

#871727

This reply has been marked as private.

[EG Friend EGJoin date: March 2014Posts: 66Downloads:54Uploads:13 Thanks: 13 Thanked: 2 times in 2 posts]

#872116

This reply has been marked as private.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#873352

You can apply the same my solution above with another dimension on your site

@media  (min-width: 1200px)

@media  (max-width: 767px)

and don’t forget to change the value padding-top and margin-top

1 user says Thank You to Ninja Lead for this useful post

1. EG

[EG Friend EGJoin date: March 2014Posts: 66Downloads:54Uploads:13 Thanks: 13 Thanked: 2 times in 2 posts]

#873755

Ok, thanks you ! However how do you chose for padding-top value ?

And why your fix works only for size screen between 940 and 1024 where as we write in css : (min-width: 768px) and (max-width: 1024px) ?

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#874168

I made some customization on CSS with media Query for Small , tablet and wide layouts as below. You can apply it on your site

@media  (min-width: 1200px) {
    #t3-content {
        padding-top: 227px !important;

    }
    #t3-features-intro {
        margin-top: 760px !important;
    }
}

@media  (min-width: 768px) and (max-width: 1024px) {
    #t3-content {
        padding-top: 127.067px !important;
    }
    #t3-features-intro {
        margin-top: 450px !important;
    }
}

@media  (max-width: 767px) { 
    #t3-features-intro {
        margin-top: 533px !important;
    }       
}

[EG Friend EGJoin date: March 2014Posts: 66Downloads:54Uploads:13 Thanks: 13 Thanked: 2 times in 2 posts]

#874603

Unfortunately, still doesn’t work very well.

Same problem as in my previous post :

• for example, it doesn’t work between 768 px and 990 approximatively and I don’t know why

Moreover :

• beyond 1200 px, I have a grey band under the image
• between 1024 and 1200 px, it doesn’t work but on this point I see why it doesn’t function.

[Author]

Posts