Hello,
I have read many threads but can’t find solution for my problem, cause It has nothing to do with background image in a row or widget.
Theme: North, building a onepage website (no url at for now)
I use a background image: Appeareance/Customise/Background Image/Prest: custom/ Image Size: fill size (tried all settings).
If I resize window or click on tablet or phone icon, the image is shown properly.
On a real device (tablet or phone) it shows a zoomed section of the image and not full image.
Browsers: opera mini,opera, firefox and google chrome
I tried different media queries for screen sizes but the image is allways zoomed in and not showing full size.
Than I made a smaller image and with media query but same problem.
Also different background-size: cover,contain, 100% auto or auto 100% dont work
The css
body.custom-background {
background-color: #33353b;
background-image: url("http://blablabal/graustufen2.jpg");
background-position: left bottom;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}I have reached the limit of my knowledge. I could live with the fact, that the image is not shown on phone but on a tablet would be nice. All rows are transparent and it looks really nice with the background image.
Hi,
meanwhile I was reading some tutorials about responsive full size background images.
I’m one step further now! The image is displayed on mobile phone using media query
the image for mobile is 786 × 524
mobile css
@media screen and (max-width: 768px) { body.custom-background { background: #000000 url('http://mydomain/wp-content/uploads/2017/06/mobilebg.jpg') no-repeat fixed; } }curious, background-position don’t work in that media query!!! Don’t understand why? If I try something like center center image nothing is displayed :)
desktop css
body { background: url('http://mydomain/wp-content/uploads/2017/06/deskbg.jpg') no-repeat fixed center center; background-size: cover; }the image for desktop is 1280 × 854
On tablet its still not working. Some large detail of the image is displayed. Is the only solution that I need several media queries to display a fullsize background image?