Background Image Problem

I Need Help
1

Just wondering as a follow up to my recent post on the old Forum re the background image resolution on iPad/Tablet in Landscape mode.

My site had to go live and my customer has noticed it.

All looks ok in every respect except the background images in landscape mode iPad etc.

www.newtonreplica.com

Thanks

2

I’d suggest having a tablet view-specific bloc and use an image that works perfectly for that on the iPad.

3

Hi pauland

Thanks for your reply.

I have an image at 1025px square placed for the mobile setting but at landscape on iPad is is still super pixelated but fine in portrait. I can only asume that the setting there for the tablet background is for portrait width - still the image is not massive enough to view so badly on the iPad landscape view.

I could of course be missing something - I checked the upload files on server and the 1025px image is there ok.

I am just concentrating on the topmost image at the minute - the other 2 backgrounds are also not right (all ok on desktop and phone portrait and landscape.

Norm is aware of my problem and was to have a look as this as it appeared in an earlier version release.

Trev

PS

Sorry edit: I think you mean using the hide feature for blocs an make a bloc viewable only for the landscape. I will give that a try. Thanks - sorry for slow uptake!

4

Using duplicate Blocs, or other methods, etc., as discussed here in this thread, is not the proper way to handle this, it needs addressed in the CSS itself. @norm

This issue is nothing new and has been lingering, as discussed in your prevous thread:
http://support.blocsapp.com/forums/topic/background-image-problem/

Blocs_User

5

Yeah I’m still trying to find the ‘new cause’ the rule for fixing this is still in place but randomly for some it’s being missed.

6

Could you share a live link so I can see if there is somthing up with your style sheet rendering?

7

live link:

www.newtonreplica.com

there are 3 background images on the home page which are all acting the same - only on iPad (Tablet) landscape mode.

I have been concentrating on the top one - the star map.

I have experimented with various size background images and options to show hide at desktop tablet and mobile.

Just thinking out loud here: could it be anything to do with how Blocs software version updates?

Sorry to be a pain about this issue Norm - I understand you must have a lot on your plate!

Trev

8

Don’t worry about it, It’s my job and I love it :wink:

Ok leave it with me, I’ll try and follow it up tomorrow once I’m at my desk for debugging.

9

Why not just use a larger image for the moment? If they are using an iPad it will very likely be on WiFi and fast to load. Not a solution of course but a reasonable work around.

10

I have experimented with various size background images - the current one on there (live) is an optimised jpeg 5472 x 3612 pix - 713 KB

As I say - everything is fine EXCEPT for tablet LANDSCAPE view

Thanks for your comment :slight_smile:

11

Now I see the issue. I thought this was a media query issue selecting the wrong image.

Your 1025 map image is a capped version of the main map image and that is making it look worse. Why not resize the main image to 1024 but preserve the detail?

Also I would say you have too many big image on that page. E.g. the crumpled paper image is 799kb and strangely seems to have a size of 0x0 so it may be corrupted. You risk users with slow connections giving up the wait.

Interesting & fascinating content on your site.

12

@t50ufo this is todo with the parallax effect. As a test, try turning it off on the hero bloc and see if that fixes it.

There is a rule in place that should prevent the parallax effect working on tablets, it may be that the rule is no longer valid in the browser you are using.

13

@t50ufo looks like your style sheet has an extra closing bracket, Looking at my version of Blocs I have running I don’t see the same error in that block of CSS so its likely this has already been fixed in the beta.

Try exporting your site with build 7: http://blocsapp.com/beta-release.html

14

Success Norm!

Build 7 had fixed the problem! More than happy!

Thanks

Trevor

1 Like
15

@norm in that previous thread you mentioned:

The images are being stretched so they fill the vertical space …

I assume here … (if elsewhere please advise)

@media (max-width: 767px) {

    /* [...] */
    
    .bloc{
        padding-left: 0; 
        padding-right: 0;  
        -webkit-background-size: auto 200%;
        -moz-background-size: auto 200%;
        -o-background-size: auto 200%;
        background-size: auto 200%;
    }
    
    /* [...] */
}

Regardless, I have always wondered why not use cover, instead?

16

@Blocs_User I think cover is used as well, its applied further up the chain.

17

@norm, You mean up at the top of the CSS, as seen here …

/* [...] */

/* = Blocs
-------------------------------------------------------------- */

.bloc{
	width:100%;
	clear:both;
	background: 50% 50% no-repeat;
	padding:0 50px;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	position:relative;
}

/* [...] */

Isn’t that however being overwritten in the 767px media query, shown above in the previous post?

Such as this basic example would:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    color: green;
    text-align: center;
}
@media (max-width: 767px) {
	h1 {
    	color: red;
	}
}
</style>
</head>
<body>
<h1> What Color am I ? </h1>
</body>
</html>

I only ask / inquire as it seems to help alleviate other non desired occurrences on Bloc sites as well. Here is one such example from a users site.

exmple.png726×650 148 KB

Like I mentioned above, I just was always curious about why the 200% vs using cover. I have tried seemingly all the Blocs and scenarios trying to see where it would cause issue, is there somewhere that it would / does ?

Thanks,
Blocs_User

1 Like