Public Forums 71,145 posts

[richardgo Friend richardgoJoin date: February 2016Posts: 8Downloads:4Uploads:3 Thanks: 2]

#899327

Hi all,

I have changed my background image within the Purity lll template and that looks fine on a PC screen. When I look at my website on a mobile device like an iPhone 6 or iPad the background is very blurry.
The code I have used is:

.t3-wrapper{
background:url(C:UsersPublicPicturesSample Picturesdesert.jpg); /path to your image
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}

Please advise and thank you in advance!

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#899331

Hi
The bg image size you set in the properties as cover so it resize with this property. You can share the site url here so i can take a look in it .

[richardgo Friend richardgoJoin date: February 2016Posts: 8Downloads:4Uploads:3 Thanks: 2]

#899334

This is the url: http://speeltuinkindervreugd.nl/

Thank you for your time.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#899339

HI
i checked the site and the bg image is not blurr , due to resize the container its showing the upper part of image that is sky and its look same as in large display . You can compare it carefully and see both are same .

1 user says Thank You to Pankaj Sharma for this useful post

1. richardgo

[richardgo Friend richardgoJoin date: February 2016Posts: 8Downloads:4Uploads:3 Thanks: 2]

#899346

Thank you so far.

Could you also please check this on a iPad? I thought it should show the same bg quality as i see on my PC screen…but it isn’t..

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#899366

Hi
could u post a screenshot of it . As i can see its only showing the sky image in the bg in Ipad .

[richardgo Friend richardgoJoin date: February 2016Posts: 8Downloads:4Uploads:3 Thanks: 2]

#899428

Please find attached the screenshots.

---

Attachments:

1. 
2. 
3. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#899522

Hi
Your site is offline now , I am not able to check it . could u put it online or post your site admin details via Private reply to check it .

[richardgo Friend richardgoJoin date: February 2016Posts: 8Downloads:4Uploads:3 Thanks: 2]

#899528

Its online again

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#899630

Hi
Kindly check it again it offline : http://prntscr.com/afdagj
Provide full access of site so i can help u in this case .

[richardgo Friend richardgoJoin date: February 2016Posts: 8Downloads:4Uploads:3 Thanks: 2]

#899753

Sorry Pankaj, I was working on it yesterday 🙂 Online now.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#899935

Hi
Try to use the bg image as `
url("http://185.56.145.73/~speelt1q/images/Template-images/bg.jpg") repeat scroll 0 0

Remove the rgb000 from the bg code .

[richardgo Friend richardgoJoin date: February 2016Posts: 8Downloads:4Uploads:3 Thanks: 2]

#899953

Hi,

I have tried it and removed but for some reason I still see that the rgb code is there again,,,

Please see the below part of the css file… I still do see it in the source of the page..

Maybe you know were I should look 😉

}
.t3-wrapper {
background: rgba(0, 0, 0, 0) url("http://185.56.145.73/~speelt1q/images/Template-images/bg.jpg") repeat scroll 0 0;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
position: relative;
left: 0;
z-index: 99;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
overflow: visible;
}
[/code]

[richardgo Friend richardgoJoin date: February 2016Posts: 8Downloads:4Uploads:3 Thanks: 2]

#899980

Hi,

I have read an article that it has to do with the "Pixel density" of my iPad or iPhone. They say that I need to have two image sizes, one regular size and another x2 the size of the original- then use media queries to display different background images for high resolution screens….

I Found this link but I do not know were to put this code… Display Media Queries

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#899999

Hi
Here is doc for how to use Media queries in Bootstrap : http://getbootstrap.com/css/#grid-media-queries

[Author]

Posts