Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • September 18, 2017 at 11:59 am #853358
    jaumellagostera

    Good morning, I’m creating this site:
    http://proyecto1.enredamecomunicacion.com

    As you can see, the image that should be on the background of the header is only applied to the logo area (image is set to be positioned top-left). How can I solve that so that this header image (the green one) is automatically enlarged to 100% of the page?
    The image file is 2600 px wide so it should be covering completely the size of the page.

    Note: That should also be like this for mobile pages.

    Thankyou.
    Jaume Llagostera

    September 18, 2017 at 12:18 pm #853364
    jaumellagostera

    Good morning,

    The same happens with the footer. I inserted an image that should be enlarged to cover all the footer but it is repeated instead. I see no way to make it enlarge.
    Original image is 1300 pixels wide so should be enough.

    Thanks

    September 21, 2017 at 10:12 am #854686
    Ismael

    Hi,

    Thank you for using Enfold.

    Please add this in the Quick CSS field.

    .header_color .header_bg {
    background-size: 100%;
    background-repeat: no-repeat;
}

    It’s better if you’re using the css gradient property instead of the image.

    // http://www.colorzilla.com/gradient-editor/

    Best regards,
    Ismael

    September 29, 2017 at 10:04 am #858372
    jaumellagostera

    Thanks for your help.

    I tried to replicate this solution for the footer but it didn’t work.

    I tried to insert:

    .footer_color .footer_bg {
    background-size: 100%;
    background-repeat: no-repeat;
    }

    unsuccessfully. Can you please help me with that?

    Best,
    Jaume

    September 29, 2017 at 11:41 am #858435
    Ismael

    Hi,

    The footer image doesn’t look good when repeated. You can try this.

    .footer_color {
    background-repeat: repeat;
}

    Best regards,
    Ismael

    October 19, 2017 at 3:57 pm #866272
    jaumellagostera

    Good Afternoon

    I have activated the secondary menu on the header. I need it to use the same background image than the main header menu.

    See how it is now:

    http://proyecto1.enredamecomunicacion.com/es/

    the secondary menu appears black with the language selector (with flags. It should be text, as it happens below). That secondary menu should look the same as the main one: Degraded Green. I applied an image that is uploaded to the wordpress, so the image should be the same for both menu bars.

    Thanks

    Jaume Llagostera

    October 21, 2017 at 5:13 am #866943
    Ismael

    Hi,

    Please add the following css code.

    #header_meta {
    background: #0c1c04 url(//proyecto1.enredamecomunicacion.com/wp-content/uploads/Fondo_header-300x92.png) top center repeat fixed;
    background-size: cover;
}

    Best regards,
    Ismael

    October 22, 2017 at 11:05 pm #867371
    jaumellagostera

    Thanks for your help, Ismael.
    I have inserted the code, but I see the border color of the header is disrupting both headers.
    I switched background-size to 100% so it fits perfectly with the main header background image.

    How can I prevent the header border from separating both headers?

    On the other hand, I would like to change the language selector on that secondary header. I need it to show the language text (ESP – CAT) instead of the flags. I can manage that easily when it’s on the main menu, through the WPML menu, but I’m having problems with that language selector. Can you help with that?

    Thanks again!
    Jaume

    October 24, 2017 at 4:50 am #867954
    Ismael

    Hi,

    Please remove the previous css modification then use this one instead.

    #header_main {
    border: 0;
}

#header_meta {
    background: transparent;
}

#header{
    background: #0c1c04 url(//proyecto1.enredamecomunicacion.com/wp-content/uploads/Fondo_header-300x92.png) top center repeat fixed;
    background-size: cover !important;
}

    Best regards,
    Ismael

    October 24, 2017 at 10:58 am #868077
    jaumellagostera

    Thanks Ismael

    I had to add color:transparent to header_meta as well, but it worked. 

    #header_main {
    border: transparent;
}
#header_meta {
    border: transparent;
}

    Thanks a lot!

    October 24, 2017 at 11:18 am #868094
    Victoria

    Hi jaumellagostera,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

    October 24, 2017 at 1:23 pm #868180
    jaumellagostera

    Hi again.
    It seems it’s not totally solved.

    I designed all the site in one of the languages (spanish) and then applied this design to the other language (Catalan) while creating translations for the page.
    After applying all theme options and all the css code I’ve got for the spanish page to the catalan one, I see this header border issue is not working well… See for your self:

    I have added the code: 

    #header_main {
    border: transparent;
}
#header_meta {
    border: transparent;
}

    to both languages…

    Thanks!
    Jaume

    October 24, 2017 at 2:10 pm #868196
    jaumellagostera

    Looks like it’s working now. I guess it needed some time…

    October 25, 2017 at 4:48 am #868522
    Ismael

    Hi,

    You’re probably looking on a cached version of the page. Anyway, glad it is fixed. Please feel to open a new thread if you need anything else.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Header background – expand picture’ is closed to new replies.