CMS Development

PrasadKD
Participante

How to make background image responsive?

resolver

I just put a background image to the complete layout using Hubspot cms. but it's not responsive on mobile. so I just want this background image to disappear in the mobile version or I want a new image as a background on mobile. How is that to do?

0 Avaliação positiva
1 Solução aceita
Oezcan
Solução
Top colaborador(a) | Parceiro Diamante
Top colaborador(a) | Parceiro Diamante

How to make background image responsive?

resolver

You are a lucky one @PrasadKD ,

 

this video came online today

Best regards,

Özcan

Oezcan Eser Signature

Exibir solução no post original

0 Avaliação positiva
3 Respostas 3
Oezcan
Solução
Top colaborador(a) | Parceiro Diamante
Top colaborador(a) | Parceiro Diamante

How to make background image responsive?

resolver

You are a lucky one @PrasadKD ,

 

this video came online today

Best regards,

Özcan

Oezcan Eser Signature
0 Avaliação positiva
Oezcan
Top colaborador(a) | Parceiro Diamante
Top colaborador(a) | Parceiro Diamante

How to make background image responsive?

resolver

Hello @PrasadKD ,

 

If you still want to use a different background image or want it to disappear, can you use media query as in my examples.

 

Example 1.
If you want the picture not to be displayed in the mobile use this.
In this example, I use min-width 600px, the image is displayed from 600px wide, not below that.

 

@media only screen and (min-width: 600px) {
body  {
background-image: url(https://i.picsum.photos/id/1/5616/3744.jpg?hmac=kKHwwU8s46oNettHKwJ24qOlIAsWN9d2TtsXDoCWWsQ) ;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}}

 

 

Example 2.

If you want to use a different image, take a look at the second example.

 

body {
background-image: url(http://ppcdn.500px.org/75319705/1991f76c0c6a91ae1d23eb94ac5c7a9f7e79c480/2048.jpg) ;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

@media only screen and (min-width: 600px) {
body {
background-image: url(https://i.picsum.photos/id/0/5616/3744.jpg?hmac=3GAAioiQziMGEtLbfrdbcoenXoWAW-zlyEAMkfEdBzQ) ;
}}

 

I hope that I could help you.

 

Best regards

Özcan

Oezcan Eser Signature
0 Avaliação positiva
webdew
Orientador(a) | Parceiro Diamante
Orientador(a) | Parceiro Diamante

How to make background image responsive?

resolver

Hi @PrasadKD  ,

Please refer to this link :- https://codepen.io/theiwaz/pen/vybjc

Hope this helps!
If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regards.

0 Avaliação positiva