Different or no background in mobile version

  • elstellino

    (@elstellino)


    12 years ago

    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 https://pedrazzi.eu/wp

    Many thanks in advance.
    Luca

    edited: link corrected

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

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You ought to make your website accessible to forum volunteers.

    Thread Starter elstellino

    (@elstellino)

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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    background-size: contain;

    Thread Starter elstellino

    (@elstellino)

    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!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You may have to use !important.

    Thread Starter elstellino

    (@elstellino)

    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?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    Where are you adding the CSS?

    Thread Starter elstellino

    (@elstellino)

    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…

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    body {
 background-size: contain !important;
}

    Thread Starter elstellino

    (@elstellino)

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

    Thread Starter elstellino

    (@elstellino)

    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.

    Thread Starter elstellino

    (@elstellino)

    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!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    What about;

    body {
 background: ("image1.png");
}

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

    ?

    Thread Starter elstellino

    (@elstellino)

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

    Thread Starter elstellino

    (@elstellino)

    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.