WordPress.org

Ready to get started?Download WordPress

Forums

BlackBird
Different or no background in mobile version (23 posts)

  1. elstellino
    Member
    Posted 1 year 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 http://pedrazzi.eu/wp

    Many thanks in advance.
    Luca

    edited: link corrected

  2. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    You ought to make your website accessible to forum volunteers.

  3. elstellino
    Member
    Posted 1 year ago #

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

  4. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

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

    background-size: contain;
  5. elstellino
    Member
    Posted 1 year ago #

    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!

  6. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    You may have to use !important.

  7. elstellino
    Member
    Posted 1 year ago #

    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?

  8. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

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

    Where are you adding the CSS?

  9. elstellino
    Member
    Posted 1 year ago #

    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...

  10. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

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

    body {
     background-size: contain !important;
    }
  11. elstellino
    Member
    Posted 1 year ago #

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

  12. elstellino
    Member
    Posted 1 year ago #

    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.

  13. elstellino
    Member
    Posted 1 year ago #

    For future reference I ended up uploading a 2x2 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!

  14. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    What about;

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

    ?

  15. elstellino
    Member
    Posted 1 year ago #

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

  16. elstellino
    Member
    Posted 1 year ago #

    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

  17. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Hi Luca,
    You seem to have the wrong CSS syntax;

    body {
     background: ("/wp/wp-content/themes/blackbird/images/background.png");
    }
    
    @media all and (max-width: 480px) {
     body {
      background: ("/wp/wp-content/uploads/2013/03/snowball.png") !important;
     }
    }

    It should be;

    body {
     background: url("/wp/wp-content/themes/blackbird/images/background.png");
    }
    
    @media all and (max-width: 480px) {
     body {
      background: url("/wp/wp-content/uploads/2013/03/snowball.png") !important;
     }
    }

    By the way, you should add your CSS styles to the bottom of the stylesheet. That reduces the risk that they'll be overridden and the need to add !important.

  18. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    I'm sorry for giving an example with the wrong syntax.

  19. elstellino
    Member
    Posted 1 year ago #

    Thanks Andrew - no need to be sorry, I really appreciate your efforts!

    Now it seems to work on mobile (or precisely, below 480px width) displaying the snowball.png 2✕2px grey dot, but at full screen the background is blank. For instance if I right click and select from the menu "View Background Image" it redirects to http://pedrazzi.eu/wp/wp-content/themes/blackbird; showing then the 404 page.

    Now the style.css file is the only one reporting the code you told me.
    This meaning that it's not written in the css style options page of the theme.

    Luca

  20. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Now the style.css file is the only one reporting the code you told me.
    This meaning that it's not written in the css style options page of the theme.

    Yes, you seem to have both options to modify the CSS. In the theme's options or in the Child Theme. There isn't a right or wrong option here. Both do the job. It may be easier to stick to one, just for less confusion.

    For the image that's not loading, I can only assume you have the wrong image path.

  21. elstellino
    Member
    Posted 1 year ago #

    Hello, I have both options but I only used the one to modify the style.css file not to create additional mess and confusion.

    I honestly don't know, regarding the wrong path:
    if I go to
    http://pedrazzi.eu/wp/wp-content/uploads/2013/03/snowball.png
    it shows the dot (-> correct path)
    and if I go manually to the specified file for wider backgrounds
    http://pedrazzi.eu/wp/wp-content/uploads/2013/03/background.png
    it still shows.

  22. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

  23. elstellino
    Member
    Posted 1 year ago #

    I was, but as it was also not displaying I tried to copy the file in the same directory of the snowball.png, which was instead displayed, and changed the path to the one I posted.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags