I created a fluid html5 page and it's background image looks fine when it is at the desk top size, but when the browser shrinks to mobile or ipad size back ground image resizes and shrinks!
I tested it in ipad and mobile and it shows the same issue!
is there anyone to help me with this issue?
Answers are in your code. If you don't want the background-image to resize, you'll need to locate the relevant CSS code. The quickest way to do that is inside Firefox or Chrome with right click and select Inspect Element.
Here is the link
I dont want the image to be repeated. I added the background image to my gridcontainer classes, but still they repeat! and when I set the to background-image:no-repeat;
the actual image shrinks down when it gets to smaller screens and my page lose background image!
is there any solution for it?
Your background is set to background-size: 100%; in your css. This means that the width is 100% of the containing element which changes when the window is resized due to the width:100%; being on the body as well.
If you remove background-size:100%; the background image will stay the same size no matter how large the viewport is.
EDIT: You aren't actually losing the bg image, it's just moving behind your iframes. The background of iframes will always be, at minimum, white when compared to the page they are inserted on. There is no way I have ever seen to make an iframe background transparent so it's continaing page shows its background through the iframe.