Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
You ought to make your website accessible to forum volunteers.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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!
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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…
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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!
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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