Topic: [Resolved] Custom header repeats on smaller screens [iPad, mobile phones etc.]

[Resolved] Custom header repeats on smaller screens [iPad, mobile phones etc.]

ace200
Participant

@ace200

11 years, 11 months ago

I am currently using BuddyPress 1.6.2. How do I stop the custom header image from repeating on smaller screen sizes like iPads and mobile phones etc? Or how can I get my website [www.bragyourself.com] to scale correctly on smaller screen sizes the same way BuddyPress.org does? Any help would be greatly appreciated. Thank you.

Viewing 7 replies - 1 through 7 (of 7 total)

Tammie Lister
Moderator

@karmatosed

11 years, 11 months ago

Do you have a link to your site? Being able to see the issue would be really helpful in advising.

Tammie Lister
Moderator

@karmatosed

11 years, 11 months ago

My apologies I see you’ve linked in your post just not directly. From looking you need to change background-image to background and / or set a no-repeat as that’s what is happening as the area gets taller the image is repeating. The CSS is designed to work on a repeatable image not a logo hence when it’s smaller the container increases in size.

ace200
Participant

@ace200

11 years, 11 months ago

@karmatosed, Thanks for getting back to me but where exactly do I go to edit or make these changes?

Here’s a screenshot of what the header image looks like on an iPhone https://docs.google.com/file/d/0BziMA9DwZ-T-MVNVOENoRF90SDA/edit

Thanks in advance.

ace200
Participant

@ace200

11 years, 10 months ago

Can someone please tell me how stop the custom header image on my website from repeating on smaller screens? Please see the image in this link https://docs.google.com/open?id=0BziMA9DwZ-T-R2dFOExRM2NZdkk.

Any help would be greatly appreciated. Thank you.

danbpfr
Participant

@chouf1

11 years, 10 months ago

hi,

@karmatosed give’s you the right answer.

Actually your header CSS looks like:
`#header { background-image: url(http://www.bragyou.com/wp-content/uploads/2012/11/bragyou_header.png); }`

You have to change this to:`#header { background: url(http://www.bragyou.com/wp-content/uploads/2012/11/bragyou_header.png) no-repeat; }`

Where ? Into your child theme style.css file

ace200
Participant

@ace200

11 years, 10 months ago

@chouf1,
Many thanks to both you and @karmatosed. I will start working on creating my child theme and make these changes. Again, thank you.

ace200
Participant

@ace200

11 years, 10 months ago

@chouf1,
The line of code that you mentioned above is not located in my child theme’s style.css file. However, I find it when I view the sites source code. Do you have any additional suggestions? Thanks for your help.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘[Resolved] Custom header repeats on smaller screens [iPad, mobile phones etc.]’ is closed to new replies.

BuddyPress.org

[Resolved] Custom header repeats on smaller screens [iPad, mobile phones etc.]

Topic Info

Topic Tags

BuddyPress.org

[Resolved] Custom header repeats on smaller screens [iPad, mobile phones etc.]

Topic Info

Topic Tags

Reply Search