Home>Support>Full width logo
  1. 9 years, 5 months ago Nathan Hartwell

    From what I can tell in your code, you have a bunch of CSS elements that want to max out the width to 1080px.

    What I would suggest is make your img take something like this for the logo.

    #header #logo img{
width:100%;
height: auto;
}

    and then removing all the max-width styles that apply to that logo.

    • 9 years, 5 months ago Rincón d'Olón

      I think I was trying different stuff when you looked. my css is like this, and your code does nothing…. thanks for the effort tho!

       /* MENU */
.main-navigation ul {
text-align: center;
}
.main-navigation ul li {
display: inline-block;
float: none;
}
.main-navigation a {
font-family: ‘Open Sans’, sans-serif;
font-size: 18px;
}


  


/* TITLE */
}
#page-title, article.post .entry-header h1.entry-title, article.page .entry-header h1.entry-title {
text-align: center;
}





/* SPACING HOME */

#main-slider {
margin-bottom: -45px;
}






/* ICON */
.widget_circleicon-widget .circle-icon-box h4 {
color: #1e73be !important;
font-size: 20px !important;
}
.widget_circleicon-widget .circle-icon-box p.text {
color: #1e73be !important;
font-size: 20px !important;
}
.widget_circleicon-widget .circle-icon-box a.more-button {
color: #1e73be !important;
font-size: 20px !important;
}
.widget_circleicon-widget .circle-icon-box a.more-button:hover {
color: #52accc !important;
font-size: 20px !important;
}
.widget_circleicon-widget .circle-icon-box .circle-icon [class^=”icon-“] {
color: #1e73be;
font-size: 20px !important;
}
.widget_headline-widget h1 {
color: #1e73be !important;
font-size: 20px !important;
}
.widget_headline-widget h3 {
color: #1e73be !important;
font-size: 18px !important;
}
#secondary .widget .widget-title {
color: #1e73be;
}
h3.widget-title {
    color: #1e73be !important;
}
.origin-widget.origin-widget-list.origin-widget-list-simple-blue ul {
    color: #1e73be !important;
  
  
  /* end */
  2. 9 years, 5 months ago Andrew Misplon
    Hi, I Work Here

    Hi Gijs

    Thanks for reaching out.

    If you have a graphic designer that has this original file or perhaps you do, what would work really well is to separate the layers. Save your logo as a 1080px wide PNG with transparent background. Then add the background image to Appearance > Customize > Page > Masthead Background Image. That would give you a responsive scalable solution that looks great.

    • 9 years, 5 months ago Rincón d'Olón

      Ok, so I uploaded a transparant logo (so at leastthe center is clickable…)

      But, the background logo keeps repeating. It’s also not the correct size (200px).

      There is something here I can’t wrap my head around….

  3. 9 years, 5 months ago Magus
    Hi, I Work Here

    Hi Rincon

    Please add the following to your custom CSS

    /* Header Adjustments */
header#masthead {
    background-color: #e2f6ff;
    background-image: url("http://www.rinconolon.ec/wp-content/uploads/2015/04/logo10big1.png");
    background-repeat: no-repeat;
    background-size: cover;
}

    This will make the background fill the header.

    Hope this helps

    Magus

    • 9 years, 5 months ago Rincón d'Olón

      Hi, I removed the bg color and changed the url to the correct (current) bg image.

      It seems to work fine,except for that it does not size full page width. Do you know what I need to put for background size?

       
header#masthead  .hgroup{
    background-image: url("http://www.rinconolon.ec/wp-content/uploads/2015/04/logo11BACKGROUND.png");
    background-repeat: no-repeat;
}
      • 9 years, 5 months ago Magus
        Hi, I Work Here

        Hi

        The missing line from above will sort that

        Background-size: cover;

        Magus

        • 9 years, 5 months ago Rincón d'Olón

          well, no. I left it out cause it didn’t do anything :) it’s in now, so you can see…

          changing it into 100% or other values doesn’t seem to help either … :D

          thanks for helping by the way!

          • 9 years, 5 months ago Magus
            Hi, I Work Here

            Hi

            There is a max-width setting that is taking priority from an earlier tag. Please try adding this to the bottom of the supplied CSS

            max-width: auto !important;

            Magus

          • 9 years, 5 months ago Magus
            Hi, I Work Here

            Forgot to add, please change the other setting from 100% back to cover.

            Magus

        • 9 years, 5 months ago Rincón d'Olón

          yep, with your last message Igot it to work! thanks!

          I guess i just need to resize my background logo, strangely enough (since both the logo and the bg logo are 200px…)

      • 9 years, 5 months ago Magus
        Hi, I Work Here

        Hi,

        Right, forget all that.

        Please change the setting for background-size back to ‘background-size: cover;’ and remove the term .hgroup from the opening tag. Overriding the max width setting unfortunately does not completely cover the entire background due to margin/padding settings.

        Have tried the original post settings with the correct image and it should work as long as the image URL is correct.

        Magus

  4. 9 years, 5 months ago Andrew Misplon
    Hi, I Work Here

    Hey guys

    Rincón, the background image repeat we can sort out no problem.

    It looks like your logo image file is completely transparent. Sorry if I wasn’t clear, let me try explain with images rather.

  5. 9 years, 5 months ago Andrew Misplon
    Hi, I Work Here

    When it was created your logo was a separate layer to the background image, a separate layer to the beach and trees image. What need ideally is for those two to be separated into two files again. In order to do this you’ll need the original layered file.

    The section outlined in red. You need that saved as your logo, but, with a transparent background. That image should only contain your logo, no beach, ocean etc.

    Then the beach ocean image, minus your logo will be used for the background image.

    This will give you a much more flexible header.

    • 9 years, 5 months ago Rincón d'Olón

      Hi Andrew, thanks for going out of your way to explain it, it was because of it being late at night that Ididn’t seperate them before :) It does make everything a lot better this way.

      I do still have the background image repeat problem. Magus’s CSS suggestion above doesn’t help either…
      At least now the height is OK, the text is centered and it’s clickable :)

  6. 9 years, 5 months ago Andrew Misplon
    Hi, I Work Here

    Super sounds like we are making progress. I'll send take a look as soon as
    I'm online again tomorrow. Thanks.

  7. 9 years, 5 months ago Magus
    Hi, I Work Here

    Hi Rincon

    Now that you have changed the background the custom CSS should read

    header#masthead  .hgroup{
    background-color: #e2f6ff;
    background-image: url("http://www.rinconolon.ec/wp-content/uploads/2015/04/logo11BACKGROUND.png");
    background-repeat: no-repeat;
    background-size: cover;
}

    The CSS I posted earlier was based on the background image in the header at the time. I have added the .hgroup container just to target the CSS a bit better.

    Hope this helps

    Magus

  8. 9 years, 5 months ago Andrew Misplon
    Hi, I Work Here

    Nice guys, looking good!

    Rincon, the following line can be removed from the #masthead selector in Custom CSS:

    max-width: auto !important;

    That, as far as I know doesn’t work.

    You now have two options. You can either use:

    background-size: cover;

    As Magus has sent through or you can use:

    background-size: 100%;
    background-position: center;

    Each will handle resize a little differently.

    If you could perhaps get a version of your background that was a little larger, that might help.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More