WordPress.org

Ready to get started?Download WordPress

Forums

Patchwork
[resolved] Costum Header Image on iphone and ipad (5 posts)

  1. wiltgenpaul
    Member
    Posted 1 year ago #

    Hi,
    thanks for this great theme!!
    I've used the maude theme.
    I've replaced the patchwork background of the header with a custom image (which includes text) and I took away the header box. Everything looks great on my computer and also on an old iphone3 and LG Galaxy smartphone. However, it seems that on some iphones and ipads the header background image displays very small and repeats multiple times to fill the height and width of the header section.
    Here are links to an iphone5 screenshot and an ipad screenshot.
    Could someone please tell me what causes that and how I can fix it?
    Here's the website: http://www.paulwiltgen.com
    Thanks so much!

  2. wiltgenpaul
    Member
    Posted 1 year ago #

    Fixed it!
    It had to do with the Retina displays on iphone5 and new ipads. I had to get rid of the "Retina Backgrounds" section in the styles.css file.

  3. yollama
    Member
    Posted 1 year ago #

    I'm having the same issue that wiltgenpaul describes, re background image and header image repeating multiple times on iphone.

    I tried deleting the Retina displays css but that didn't change the way it looked on my iPhone, so I replaced the Retina bit pending finding a solution.

    Site is here: http://blog.LooseEnds.net

    Thanks.

  4. ttekka
    Member
    Posted 1 year ago #

    Paul, how did you replace the patchwork background of the header with a custom image and take away the header box?

    My site is im2materialgirl.com.br

    Thanks for your help!

  5. wiltgenpaul
    Member
    Posted 1 year ago #

    to take away the header box, write the following into your child theme styles sheet:

    #masthead hgroup {
    display: none;
    }

    to replace the patchwork background image, write the following into your child theme styles sheet (when using the "maude" them):

    .style-maude #masthead {
    background-image:url(images/patchwork.jpg);
    border-bottom: 10px solid #46433a;
    }

    and replace (images/patchwork.jpg) with the location of your image, like for example:
    ("http://yourimagelocation.jpg")

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic