[SOLVED] Innerpage_header image not responsive - JF Sybix - Joomla Templates

Welcome, Guest

joomfreak.com Support Forum

TOPIC: [SOLVED] Innerpage_header image not responsive

[SOLVED] Innerpage_header image not responsive 06 Sep 2019 10:09 #11815

Is it possible to make the innerpage_header image responsive?
Thanks

Last Edit: 06 Sep 2019 10:10 by [email protected].

Reply Quote

Posts:8
[email protected]
Fresh Boarder
OFFLINE
Karma: 0

Re: Innerpage_header image not responsive 13 Sep 2019 02:49 #11839

Innerpage_header uses background-size: cover; to resize the background image to cover the entire container, not use image.

joomfreak

Reply Quote

Posts:2940
isupport
Moderator
OFFLINE
Karma: 0

Re: Innerpage_header image not responsive 16 Sep 2019 11:28 #11845

Sorry, I don't know how can I resolve..
Can you help me?

Reply Quote

Posts:8
[email protected]
Fresh Boarder
OFFLINE
Karma: 0

Re: Innerpage_header image not responsive 25 Sep 2019 02:42 #11860

Can you please send me your website url?

joomfreak

Reply Quote

Posts:2940
isupport
Moderator
OFFLINE
Karma: 0

Re: Innerpage_header image not responsive 27 Sep 2019 17:37 #11872

Yes, I can:

www.casaprobo.it

Thank you

Reply Quote

Posts:8
[email protected]
Fresh Boarder
OFFLINE
Karma: 0

Re: Innerpage_header image not responsive 04 Oct 2019 03:00 #11893

Try to edit file templates/jf_sybix/css/template.css, at line 6315 modify:

 
.breadcrumbs {
    height: 295px;
    background: url(../images/innerpage_header.jpg) no-repeat;
    background-size: cover;
    -moz-transition: 2s all;
    -webkit-transition: 2s all;
    -o-transition: 2s all;
    -ms-transition: 2s all;
    transition: 2s all;
	position: relative;
}

to: (add background-position: center;)

 
.breadcrumbs {
    height: 295px;
    background: url(../images/innerpage_header.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    -moz-transition: 2s all;
    -webkit-transition: 2s all;
    -o-transition: 2s all;
    -ms-transition: 2s all;
    transition: 2s all;
	position: relative;
}