Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • November 20, 2013 at 2:10 am #190773
    MENS

    Hi,

    Question:

    I’ve got a non-fixed header with a background image set to bottom center behind the navigation and a transparant logo.
    It works on a large screen but on an ipad i need to move that particular background image to the right.
    I’ve placed the code beneath but somehow the background picture is duplicated although it is set to no repeat.

    @media all and (max-width: 1024px) and (min-width: 520px) {
    .header_bg {background: url(http://gitaarsalon.groeier.nl/wp-content/uploads/2013/11/Gitaarsalon-2560x450pxBoven221.png) no-repeat bottom center;left: 100px!important;
    }

    Is there a way to move this background image to the right on an ipad?

    website url:
    http://gitaarsalon.groeier.nl

    Cheers Herrbirk

    November 21, 2013 at 2:52 am #191266
    Josue

    Hey Herrbirk!

    Have you tried setting the background position as “bottom left” or “bottom right”?

    .header_bg {background: url(https://gitaarsalon.groeier.nl/wp-content/uploads/2013/11/Gitaarsalon-2560x450pxBoven221.png) no-repeat bottom right;

    Best regards,
    Josue

    November 22, 2013 at 1:47 pm #191826
    MENS

    Hi Josue,

    I’ve set it to bottom left and this works for pc and ipad only on a mobile i get a glitch.

    I’ve tried this code to stop the .header_bg from showing up on mobile but it doesn’t work:

    @media all and (max-width: 480px) {
    .header_bg {display:none!important; }}

    Is there a way to block this background image with media queries?

    Cheers Herrbirk

    November 22, 2013 at 4:40 pm #191884
    Yigit

    Hi!

    Please try adding following code instead

    @media all and (max-width: 480px) {
.header_bg { background: none!important; }}

    Regards,
    Yigit

    November 22, 2013 at 4:59 pm #191900
    MENS
    This reply has been marked as private.
    November 24, 2013 at 6:07 pm #192528
    Devin

    Hey!

    I don’t see the css from Yigit in place but it should work (or you can adjust it as needed for a higher starting value).

    Regards,
    Devin

    November 25, 2013 at 12:55 pm #192906
    MENS

    Hi Devin,

    Sort of fixed the logo for ipad and bigger screens, only the height of de header (logo and navigation) is reduced for mobile. Is it possible to disable this?

    Cheers Jasper

    ps. this problem is visible on iphone landscape

    November 26, 2013 at 4:22 pm #193482
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    @media all and (max-width: 480px) { strong.logo {
height: 140px!important; } }

    Regards,
    Yigit

    November 26, 2013 at 7:21 pm #193545
    MENS

    Hi Yigit,

    I’ve placed the code but the prblem remains..

    Image:

    http://gitaarsalon.groeier.nl/wp-content/uploads/2013/11/height.png

    Cheers Jasper

    November 26, 2013 at 11:30 pm #193604
    Yigit

    Hey!

    It seems like code is not being applied. I am not sure if it will make any difference but please try adding following code to Quick CSS

    @media screen and (max-width: 480px) { strong.logo {
height: 140px!important; } }

    Flush browser cache after applying the code and refresh your page a few times. It should look like this http://i.imgur.com/Sgc2546.jpg

    Regards,
    Yigit

    November 27, 2013 at 12:24 am #193631
    MENS

    Thank you so much!

    Cheers!

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Change position of header background image on ipad’ is closed to new replies.