Background images - Page 2

User 2368988 Photo


Registered User
7 posts

Thanks Bainn,
Where about would I add the code, is it just in the header or does it need to be in a specific place please?

Wayan, I checked the site on different laptops and PC screens yesterday and the photos were not distorted like on the Landscape I pad. it does look as though they are being magnified on the ipad.
I will see if I have any better resolution photos.

One thing I did notice yesterday on the large screen PC was that the layout of the site changed and it showed the original green "button" icons as opposed to the "book now" icons. I have run through all the breakpoints and at no point in RSD does it show the green Icons! Any ideas?
User 2699991 Photo


Registered User
5,394 posts
Online Now

Nigel Allen wrote:
Thanks Bainn,
Where about would I add the code, is it just in the header or does it need to be in a specific place please?

Wayan, I checked the site on different laptops and PC screens yesterday and the photos were not distorted like on the Landscape I pad. it does look as though they are being magnified on the ipad.
I will see if I have any better resolution photos.

One thing I did notice yesterday on the large screen PC was that the layout of the site changed and it showed the original green "button" icons as opposed to the "book now" icons. I have run through all the breakpoints and at no point in RSD does it show the green Icons! Any ideas?

Maybe there is a breakpoint hidden up high behind the design pane on the right

As a test to see about image resolutions,, place the image you have of the B&B 1200px as a background in one of the other rows/columns ans see how it looks
Other than thay you are probably going to have to upload the project file (maybe dropbox because it is going to be too big to put it on this forum)
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 2699991 Photo


Registered User
5,394 posts
Online Now

Wayan Jaya wrote:
Nigel Allen wrote:
Thanks Bainn,
Where about would I add the code, is it just in the header or does it need to be in a specific place please?

Wayan, I checked the site on different laptops and PC screens yesterday and the photos were not distorted like on the Landscape I pad. it does look as though they are being magnified on the ipad.
I will see if I have any better resolution photos.

One thing I did notice yesterday on the large screen PC was that the layout of the site changed and it showed the original green "button" icons as opposed to the "book now" icons. I have run through all the breakpoints and at no point in RSD does it show the green Icons! Any ideas?

Maybe there is a breakpoint hidden up high behind the design pane on the right

As a test to see about image resolutions,, place the image you have of the B&B 1200px as a background in one of the other rows/columns ans see how it looks
Other than thay you are probably going to have to upload the project file (maybe dropbox because it is going to be too big to put it on this forum)


as far as the code, that would have to go in tour css after exporting,,, just make sure that at the lower end of the scale the image background is set to "scroll" in the background images settings thingy (the one where you put the background into wherever you put it
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 2839879 Photo


Registered User
99 posts

Add the following to the head...

<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="newcssstuff.css" />


Open Notepad and add the following...

/* Makes background images look ok on iphones & ipads */
@media screen and (max-width: 1024px) {
body * {background-attachment: scroll !important;}
}


Save the document as a .css file (by default it will be a .txt file).

Add the file to the root directory of your website (where all your html files are located). Hope this helps.
CoffeeCup Websites:
City Church Christchurch: https://city.org.nz
Champion Freight: https://www.championfreight.co.nz/
eChamp: https://echamp.co.nz/
Champion Containers: http://championcontainersnz.com/
User 2699991 Photo


Registered User
5,394 posts
Online Now

Bainn wrote:
Add the following to the head...

<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="newcssstuff.css" />


Open Notepad and add the following...

/* Makes background images look ok on iphones & ipads */
@media screen and (max-width: 1024px) {
body * {background-attachment: scroll !important;}
}


Save the document as a .css file (by default it will be a .txt file).

Add the file to the root directory of your website (where all your html files are located). Hope this helps.

Bain
I Think you forgot to mention he should save the txt file as a css file named "newstuff:" otherwise the href won't see it (or am I wrong) if i'm wrong apologies, & I will delete this post, If it is the case perhaps you would like to edit your post, & then I will delete this post.

Wayan
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 2699991 Photo


Registered User
5,394 posts
Online Now

Bainn wrote:
There is an issue with iOS and background-size:cover with background-attachment: fixed. Basically, it magnifies images on your iPhone or iPad.

The easies way around this is to add the following code....

@media screen and (max-width: 1024px) {
body * {background-attachment: scroll !important;}
}


Basically, this will make background images scroll when the viewpoint is less than 1024px. There are ways to isolate iOS using @media, but I was satisfied with this solution.


Well once again call me stupid if you like,, but surely all one has to do is make sure that the background images are set to scroll at the breakpoints UPTO 1024 after that can be set to fixed

I have done a test project and have no problems with the blurring/distortion on both pc/apple & mobiles (inc iphone/ipad
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 2699991 Photo


Registered User
5,394 posts
Online Now

I still maintain that the problem is the size of the image
for example
the image of the church, the hall, the stairway & the dining room are sizes
260px X 195px

the image of the lounge-patio is
500px X 375px, (which is a little bit better but still going to be blurred at any size above 1024)

The only background image that is clear (to a point) is the one of the actual B&B which is sized at 1500px X 1125px
(which is just about ok for larger monitors,

No matter what (fixed or scroll) as a background image set to cover even at the 640 breakpoint those images (except maybe the lounge-patio) are going to be blurred, and at 1024 and above there is no chance for them to be anything else other than very blurred. As I suggested in my first reply, those images need either increasing in size or set to contain or custom NOT COVER (but still no good for larger views)
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 187934 Photo


Senior Advisor
20,271 posts

The page in the link looks fine on my iPhone.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2699991 Photo


Registered User
5,394 posts
Online Now

Eric Rohloff wrote:
The page in the link looks fine on my iPhone.


Yes Eric the problem is at the higher views,ipad/tablet upwards, the images are far too small to be set to "COVER"
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 2839879 Photo


Registered User
99 posts

Wayan Jaya wrote:

I Think you forgot to mention he should save the txt file as a css file named "newstuff:" otherwise the href won't see it (or am I wrong) if i'm wrong apologies, & I will delete this post, If it is the case perhaps you would like to edit your post, & then I will delete this post.

Wayan


You are correct. I got ahead of myself and didn't check my instructions thoroughly enough.
CoffeeCup Websites:
City Church Christchurch: https://city.org.nz
Champion Freight: https://www.championfreight.co.nz/
eChamp: https://echamp.co.nz/
Champion Containers: http://championcontainersnz.com/

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.