header by product

yehoshua · November 2015

1.- Hi, i need diferent header by product page in woocommerce.

2.- this is my solution

.postid-3375 #Header_wrapper {
    background-repeat: no-repeat;
    background-position: center top;
    background-image: url("../../ppal/cenefas/calaverabicolor.png");
}

I change #header_wraper depending of postid and insert diferent background-image , #header_wraper its a <div>,

Now the problem is the responsive option not work in all devices.

Any idea.

thanks

Albert · November 2015

Hi,

please send us url to page where you got a problem so we can have a look on it.

Thanks!

yehoshua · November 2015

This are 2 examples:

ATTACH IMAGE

Albert · November 2015

Ok. So you meant responsiveness of those backgrounds. We were wondering what exactly does not work so it's good to know what you mean now. However, background images are not responsive and never won't be. CSS background images and responsive mode are technically incompatible and never won't be unfortunately.

yehoshua · November 2015

ok, the problem its only in mobile devices, any idea for personalization of this part in mobile device.

Maybe with

@media ....

yehoshua · November 2015

maybe some code similar for this:

@media screen and (min-width: 380px) {
.postid-6225 #Header_wrapper {
    background-repeat: no-repeat;
    background-position: center top;
    background-image: url("../../ppal/cenefas/prueba_1.jpg");
}
}

Albert · November 2015

If you want, you can try to play with custom css but we don't think so that it would be good idea. Your css is wrong and instead you should use something like below:

@media only screen and (max-width: 767px) {
    .postid-6225 #Header_wrapper {
        background-image: url('#') !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
    }
}

yehoshua · November 2015

Hi, not working your recomendation, only work this:

@media only screen and (max-width: 767px) {
    .postid-6225 #Header_wrapper {
        background-color:red;
    }
}

ANY IDEA....

Albert · November 2015

For which page you used our css? Please give us the url of such page and we'll check.

yehoshua · November 2015

Hi, thanks for your answer.

1.- I add the css recomendation in admin option " custom css y js "

2.- this is the code:
@media only screen and (max-width: 767px) {
    .postid-6225 #Header_wrapper {
        background-image: url('../../ppal/cenefas/calaveranaranja.png') !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
    }
}

3.- Not work, this is the url:

thanks

Albert · November 2015

We noticed that you did one mistake. You left it it your message and we just missed that part. Instead of TOP you should use BOTTOM attribute for background. So the completely code should be:

@media only screen and (max-width: 767px) {
    .postid-6225 #Header_wrapper {
        background-image: url('../../ppal/cenefas/calaveranaranja.png') !important;
        background-position: center bottom !important;
        background-repeat: no-repeat !important;
    }
}

yehoshua · November 2015

YEAHHHHH.

Thanks

fabulous technical support

Albert · November 2015

You're welcome

header by product

Comments