Logo Not Aligned

Discussion in 'HTML & Website Design' started by Superluigi6, Aug 8, 2013.

  1. #1
    Hey there,

    When I uploaded my logo onto my blog, it was not aligned perfectly with the header. Take a look:

    logo.JPG

    Could I get some help please?
     
    Superluigi6, Aug 8, 2013 IP
  2. ekim941

    ekim941 Member

    Messages:
    74
    Likes Received:
    7
    Best Answers:
    7
    Trophy Points:
    33
    #2
    Yup, that's pretty not aligned. First, I would make your logo a PNG with transparency to avoid the awkward white area that is covering up your background image.
    Then, look at the header upload section of your blog theme to see what size the image will be cropped to.
    Since you seem to have a screenshot, you could probably load that into photoshop to get the right size.
    Or, you could right-click on the image in your browser and select "inspect element" to see the size of the image container compared to the image size.
     
    ekim941, Aug 8, 2013 IP
  3. Superluigi6

    Superluigi6 Greenhorn

    Messages:
    26
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    23
    #3
    how do I make it with transparency?
     
    Superluigi6, Aug 8, 2013 IP
  4. Superluigi6

    Superluigi6 Greenhorn

    Messages:
    26
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    23
    #4
    Yeah I tried that but didn't work. Found the size, adjusted the logo, nothing :(
     
    Last edited: Aug 9, 2013
    Superluigi6, Aug 9, 2013 IP
  5. sweetkate

    sweetkate Well-Known Member

    Messages:
    381
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    115
    #5
    hello luigi please send us your logo here and your website.
     
    sweetkate, Aug 9, 2013 IP
  6. geeks4share

    geeks4share Active Member

    Messages:
    314
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    73
    #6
    If you know to use photoshop, open the image in photoshop and pick the "Magic Eraser Tool" and click on the white area so that it gets removed.
     
    geeks4share, Aug 9, 2013 IP
  7. Superluigi6

    Superluigi6 Greenhorn

    Messages:
    26
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    23
    #7
    Yeah I did that, nothing happened
     
    Superluigi6, Aug 9, 2013 IP
  8. ekim941

    ekim941 Member

    Messages:
    74
    Likes Received:
    7
    Best Answers:
    7
    Trophy Points:
    33
    #8
    You should be working with the original PSD file. If all you have is a GIF or JPG image, open it in photoshop.
    Click on Image > Mode and select RGB Color.
    Double-click on the Padlock icon on the "Background" layer to unlock it as a layer.
    Now, select the white area with the magic wand and hit Delete.
    Select File > Save for web and devices.
    Save it as a PNG
     
    ekim941, Aug 9, 2013 IP
  9. Superluigi6

    Superluigi6 Greenhorn

    Messages:
    26
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    23
    #9
    Nope, didn't do anything.
    dt92066.JPG
    What I also did was that I got rid of the background of the image just for fun, and if I replace the background link with my logo, it will show fully, but it will show the name of my blog over the header.

    Wait a second, do you think the pages above the logo would of caused this?
     
    Superluigi6, Aug 9, 2013 IP
  10. TokensLive.Com

    TokensLive.Com Greenhorn

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #10
    could you send a link so we can see the page markup and all that the eye does not see.
     
    TokensLive.Com, Aug 10, 2013 IP
  11. Superluigi6

    Superluigi6 Greenhorn

    Messages:
    26
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    23
    #11
    Um, I'll message the link to you. Because it is private only.
     
    Superluigi6, Aug 13, 2013 IP
  12. divyareddy

    divyareddy Greenhorn

    Messages:
    49
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #12
    You can search with free logo in google..
    Also there will be lot of free websites for logo..
    You can also slice with your own with use of online applications like Photoshop.
    Warm Regards,
     
    divyareddy, Aug 19, 2013 IP
  13. Superluigi6

    Superluigi6 Greenhorn

    Messages:
    26
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    23
    #13
    What do you mean?
     
    Superluigi6, Aug 30, 2013 IP
  14. creativewebmaster

    creativewebmaster Active Member

    Messages:
    654
    Likes Received:
    7
    Best Answers:
    4
    Trophy Points:
    78
    #14
    Try to use logo class width maximum Or give me blog URL to fix it.
     
    creativewebmaster, Aug 31, 2013 IP
  15. Shyamin Ayesh

    Shyamin Ayesh Active Member

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    76
    #15
    add width attribute to your logo.
    <img src="link to your logo here" width="250px" />
    Code (markup):
     
    Shyamin Ayesh, Sep 2, 2013 IP
  16. Susan Garrett

    Susan Garrett Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #16
    Open a new file on photoshop. Choose “Transparent” for your bg contents. Add in your image and save it as a file for webs and devices.
     
    Susan Garrett, Sep 5, 2013 IP