CMS Development

PrasadKD
Participant

How to make background image responsive?

SOLVE

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 Upvotes
1 Accepted solution
Oezcan
Solution
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

How to make background image responsive?

SOLVE

You are a lucky one @PrasadKD ,

 

this video came online today

Best regards,

Özcan


check
Did my post help answer your query? Help the Community by marking it as a solution

View solution in original post

0 Upvotes
Oezcan
Solution
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

How to make background image responsive?

SOLVE

You are a lucky one @PrasadKD ,

 

this video came online today

Best regards,

Özcan


check
Did my post help answer your query? Help the Community by marking it as a solution

0 Upvotes
Oezcan
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

How to make background image responsive?

SOLVE

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


check
Did my post help answer your query? Help the Community by marking it as a solution

0 Upvotes
webdew
Guide | Diamond Partner
Guide | Diamond Partner

How to make background image responsive?

SOLVE

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 Upvotes