responsive problem with header background-image

resolved (13 posts) (3 voices)

  1. ioconsrl
    Member

    In view mobile (responsive) header background does not appear, only see a gray background. How I can put a background-image in the header in the mobile version?
    In "Mobile Custom Css" I wrote . mysite_responsive # header {background-image:url(http://www.c-inmueblesparaguay.com/wp/wp-content/uploads/2014/03/fondo_panorama.jpg)!important;} but still does not work.

    Posted 3 years ago #
  2. Elliott
    Support

    Hello ioconsrl,

    Try this,

    .mysite_responsive #header {background-image:url("http://www.c-inmueblesparaguay.com/wp/wp-content/uploads/2014/03/fondo_panorama.jpg")!important;}

    Posted 3 years ago #
  3. ioconsrl
    Member

    Thank you very much, I didnt notice. Works for mobile but does not work on the computer (on a small screen).
    The property:

    background:-webkit-linear-gradient (top, rgba (0,0,0, .2), rgba (0,0,0, .5)) important;!
    background:-moz-linear-gradient (top, rgba (0,0,0, .2), rgba (0,0,0, .5)) important;!
    background:-o-linear-gradient (top, rgba (0,0,0, .2), rgba (0,0,0, .5)) important;
    !

    overwrites custom css mobile properties.

    Posted 3 years ago #
  4. ioconsrl
    Member

    Already solved, I added the properties of ".mysite_responsive # header ..." in custom css (not in mobile custom css). Is that okay?

    Posted 3 years ago #
  5. Elliott
    Support

    Yes

    Posted 3 years ago #
  6. monkseo
    Member

    hi, I am having an issue where after I upgraded the mobile header is a different color... I tried adding this to the custom css in the infocus admin but still the header image on the iphone is blue and not grey as it is on on the desktop and as I wished this code would fix:

    .mysite_responsive #header {background-image:url("http://naegele-inc.com/wp-content/uploads/2014/12/header2.png")!important;}

    Posted 2 years ago #
  7. monkseo
    Member

    I also tried this, but ddin't seem to solve issue either:

    .mysite_responsive #header {background-color: #cccccc !important;}

    Posted 2 years ago #
  8. monkseo
    Member

    any ideas?

    Posted 2 years ago #
  9. Elliott
    Support

    Send us a link and we'll take a look.

    Posted 2 years ago #
  10. monkseo
    Member

    thanks here: http://goo.gl/AEIhO7

    Posted 2 years ago #
  11. Elliott
    Support

    Look around line 680 in your style.css file and change it there.

    .mysite_responsive.has_slider #header, .mysite_responsive #header {
        background: -moz-linear-gradient(center top , rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5)) repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
        border-bottom: 2px solid rgba(0, 0, 0, 0.4);
        border-top: 8px solid rgba(0, 0, 0, 0.01);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 10px 50px #000;
        height: auto;
    }
    Posted 2 years ago #
  12. monkseo
    Member

    I don't get it... I tried putting that in my custom css, it didn't work...

    then I went into the Infocus > Skins >advanced and looked and there is nothing in there like that... can you please be more specific?

    I don't understand, why isn't this working? which CSS?

    Posted 2 years ago #
  13. monkseo
    Member

    GOT IT THANKS!

    Posted 2 years ago #

Reply

You must log in to post.

Construct WordPress Theme
Construct wordpress theme
Myriad WordPress Theme
Myriad wordpress theme
Method WordPress Theme
Method wordpress theme
Fusion WordPress Theme
Fusion wordpress theme
Elegance WordPress Theme
Elegance wordpress theme
Echelon WordPress Theme
Echelon wordpress theme
Dejavu WordPress Theme
Dejavu wordpress theme
Modular WordPress Theme
Modular wordpress theme