WordPress.org

Support

Support » Themes and Templates » Different or no background in mobile version

Different or no background in mobile version

  • I managed to tweak my website but now I am at a point where I found a nice seamless background that is perfect for desktop but way too big for mobile devices, as some areas are covered by the background, and other not.
    How can I display a different background, maybe a solid color instead of the texture I applied on the standard version? I’d need it only when the page switches from the standard menu to the js one.

    Also, why the 1px border I put on the image is not displayed at the right please?
    I added in front-page.php the following line:
    <div style="border:1px solid #3b3b3b;">
    just after the <!--Start Slider--> one.

    my site is at http://pedrazzi.eu/wp

    Many thanks in advance.
    Luca

    edited: link corrected

Viewing 15 replies - 1 through 15 (of 22 total)
  • Moderator Andrew Nevins

    @anevins

    Forum moderator

    You ought to make your website accessible to forum volunteers.

    sorry, that’s http://pedrazzi.eu/wp !!!

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    What about using a background-size style on the background image?

    background-size: contain;

    so that it resizes the background just like the slider is resized?
    I tried to add quickly this line on the theme Custom CSS option, but nothing seem to have changed; I will try later to add the line directly in style.css
    Thanks for now!

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    You may have to use !important.

    back home.
    I tried to add
    background-size: contain !important;
    in the style.css file but no joy…

    What I experienced anyway with the tiled background is that mobiles (at least my wife’s one) only show the next tile when is fully displayed on the screen, leaving white patches if one scrolls fast.
    Ideally a solid background would be better, or am I wrong?

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Hang on, your stylesheet looks pretty empty
    http://pedrazzi.eu/wp/wp-content/themes/bb/style.css

    Where are you adding the CSS?

    I believe I missed a step somewhere. oops.
    I actually used the style.css it was already in blackbird, after saving the original one in my hard drive. I usually just rename the old css style sheet and upload a new css each time, and if something goes wrong I simply delete the newest style.css and rename back the previous one.

    I understand now that I should have modified the style.css of the child theme but at this point I modified too much stuff, of which I barely knew the syntax but I could see the immediate effects thanks to firebug. What should I do now?
    To be honest I don’t know if what I’ve done is so wrong, I can come back at any time if I want…

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Try adding this CSS in your Child Theme style.css file;

    body {
     background-size: contain !important;
    }

    Thanks, I did it but it seems that it does no longer add the background when scrolling on mobile

    oops, I pressed ‘Post’ by mistake.

    I can see white areas when scrolling, and it loads the background just in the first portion of the page.
    Thanks.

    For future reference I ended up uploading a 2×2 pixel png image in a light grey as a background, and it now shows perfectly both on desktop and mobile.

    This question is still unresolved though, so if anybody “in the know” would want to shoot their opinion on how to display different backgrounds images in desktop and mobile versions of the site – well, thanks!

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    What about;

    body {
     background: ("image1.png");
    }
    
    @media all and (max-width: 480px) {
     body {
      background: ("image2.png");
     }
    }

    ?

    Thanks Andrew, as rapid as lightning!
    I will try right now and report.

    Hello,

    Well – I tried but no luck. I gave the !important tag too after the ("image2.png"), but it only shows the textile-like background which is difficult to display on mobile. I tried on the style.css and in the css options of the Blackbird theme too.
    However I believe that this behavior depends from header.php, where I previously modified (probably, I honest don’t remember) a name file to redirect it to my background file, although I am pretty sure I just renamed my original background as background.png:

    <body <?php body_class(); ?> style="<?php if
     (blackbird_get_option('blackbird_bodybg') != '') { ?>background:
     fixed url(<?php echo blackbird_get_option('blackbird_bodybg');
    ?>);<?php } else {
    
                ?> background: fixed url(<?php echo
    get_template_directory_uri(); ?>/images/background.png); <?php } ?>" >

    Thanks,
    Luca

Viewing 15 replies - 1 through 15 (of 22 total)
  • The topic ‘Different or no background in mobile version’ is closed to new replies.