Backgroun header image no responsive

This topic has 4 replies, 2 voices, and was last updated 2 years, 2 months ago by Forum Moderator.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
October 1, 2019 at 6:30 pm #131801
Guillermo
Participant
- Topics: 11
- Replies: 24
- Total: 35
Member since: May 28, 2019
I would like that when I am the laptop that the header image adapts to the screen, how can I do that? You will see in the picture. Thank you. Thank you.

View post on imgur.com
October 2, 2019 at 5:18 am #131812
Forum Moderator
Participant
- Topics: 0
- Replies: 27930
- Total: 27930
Member since: August 16, 2013
Hi,

Kindly use this CSS
```
@media screen and (max-width:767px) {
.page .page_head_bg, .page .post_head_bg { background-size:100% auto !important; background-position:center 30px !important; min-height:140px !important; background-color:#000 !important;}
}
```
Regards,
Brad
October 2, 2019 at 8:25 am #131860
Guillermo
Participant
- Topics: 11
- Replies: 24
- Total: 35
Member since: May 28, 2019
Thank you
October 2, 2019 at 9:00 am #131865
Guillermo
Participant
- Topics: 11
- Replies: 24
- Total: 35
Member since: May 28, 2019
The responsive works but when it is on the “Posts Header Background Image” the responsive does not work, thank you in advance

View post on imgur.com
October 2, 2019 at 9:27 am #131866
Forum Moderator
Participant
- Topics: 0
- Replies: 27930
- Total: 27930
Member since: August 16, 2013
Hi,

Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:
```
@media screen and (max-width:767px) {
.page .page_head_bg, .page .post_head_bg, .single .page_head_bg, .single .post_head_bg { background-size:100% auto !important; background-position:center 30px !important; min-height:140px !important; background-color:#000 !important;}
}
```
Regards,
Brad
Author

Posts