Custom Header Image

  • Author
    Posts
  • #44608

    mflecuyer
    Member
    Original poster

    I am having trouble to customize the header image for my site. I have tried to use a .jpeg and a .png image, saved in suggested size (1280 x 500 pixels), but the image always looks stretched/zoomed in… As if the image was way too wide.

    I don’t know anything about CCS. I’ve read some forums but it seems that every theme has its own codes.

    Thanks for your help!

    The blog I need help with is: undertanzanianskies.com

    #44703

    maharzan
    Theme Author

    Hi mflecuyer,

    The header image scales to fit the width of the browser but it shouldn’t be stretching as to make the image look distorted. I didn’t see a header image in your site currently. If you can add that, perhaps I can suggest the css code that will not “scale” the image.

    Thanks,
    Chandra

    #44722

    mflecuyer
    Member
    Original poster

    Hi Chandra,

    I resolved the problem by adding a logo on my site instead of a customize header. But now, I have another problem…

    My logo is not resizing/scaling on mobile. When viewed on mobile, there is a full sized header with content in a single column on the left, so there is a lot of whitespace on the right. This only occurs on my Home page, so it think the issue is related to the logo.

    Now that I know how to customize the CCS, is there a code I can use to fix this problem?

    Thanks a lot!

    MF

    #44724

    mflecuyer
    Member
    Original poster

    * Specification: I’m not using the mobile theme. I prefer that people directly see the full site.

    #44738

    wearabelle
    Member

    Hello i got a problem with my custom header image.
    Is there a css code for showing the image just on the home page?
    i don’t want it to show up in every single page.

    thanks,
    isabella

    #44766

    maharzan
    Theme Author

    Hi MF,

    I think you used this class

    .sitetitle{ max-width: 1000px; }

    Can you change that to

    .sitetitle{ max-width: 100%; }

    That might fix the white space issue.

    Thanks,
    Chandra

    #44767

    maharzan
    Theme Author

    Hi Isabella,

    Can you post your site URL?

    Thanks,
    Chandra

    #44768

    wearabelle
    Member
    #44769

    mflecuyer
    Member
    Original poster

    Problem resolved! :)
    Many thanks Chandra!

    #44770

    maharzan
    Theme Author

    Isabella,

    Please try this css

    .site-header { display: none; }
    .home .site-header { display: block; }

    Hope that helps.

    Thanks,
    Chandra

    #44771

    wearabelle
    Member

    great chandra thank you! just one question:
    As if i click on “blog” Blog is written in a white font and the Background is black.
    What do i have to do if want to do the same for “About Me”?

    Thanks,
    isabella

    http://www.beautybysoraya.com

    #44779

    maharzan
    Theme Author

    You can try this css

    header.entry-header {
    text-align: center;
    margin: 0;
    width: 100%;
    background: #000;
    padding: 3%;
    }
    .entry-title { color: #fff; }
    #44989

    rainbowmimi
    Member

    Hi! How can I make my site title show up in the header?
    houseofcabelo.com
    Thank you!

    #44997

    maharzan
    Theme Author

    Hi rainbowmimi,

    Which theme are you using? I saw you are using Full Frame but this forum is for Awesome.

    Can you also please create a new thread if its a new issue?

    Thanks,
    Chandra

    #45063

    I uploaded a image with 1280x500px for a custom image header but the image always looks stretched. Inspecting the page source I see this:

    <header id="masthead" class="site-header awesome-slideshow horimg has-header-image horimg" data-ratio="1.6" role="banner" style="background-image: url(http://lumniscapes.files.wordpress.com/2014/03/dsc1863-edit.jpg); height: 745px;">

    Why? I don’t coded this height.

    Is there a code I can use to fix this problem?

    TIA.

    Jaime.
    lumniscapes.com

    #45064

    maharzan
    Theme Author

    Hi Jaime,

    You can try this css to fix this issue.

    #masthead { background-size: contain; height: 500px !important; }

    Thanks,
    Chandra

    #45065

    maharzan
    Theme Author

    Hi Jaime,

    You can try this css to fix this issue.

    #masthead { background-size: contain; height: 500px !important; }

    Thanks,
    Chandra

    #45072

    Problem fixed. Thank you.

    Now, just another question: are there screenshots of all Awesome themes or site demos?

    Thanks,
    Jaime

    #45073

    maharzan
    Theme Author

    Hi Jaime,

    I don’t think we have all the sites. Some of them are listed on the Awesome Theme Page (at the bottom). http://theme.wordpress.com/themes/awesome/

    Thanks,
    Chandra

    #45074

    maharzan
    Theme Author

    Hi Jaime,

    I don’t think we have all the sites. Some of them are listed on the Awesome Theme Page (at the bottom). http://theme.wordpress.com/themes/awesome/

    Thanks,
    Chandra

The topic ‘Custom Header Image’ is closed to new replies.