2

Thanks in advance for your help.

I'm developing a simple landing page here:

www.checkinplace.com

You will see that this simple contact form is responsive.

The normal view is this one:

enter image description here

When you resize the screen to its minimum width you get this:

enter image description here

Now, the problem is when you want to see the page on a mobile device.

Here all looks good:

enter image description here

... but when you scroll down:

enter image description here

The basic CSS for the background goes like this:

<style>html { background: url(/site/assets/img/backgrounds/background.jpg) no-repeat; background-size: cover; }</style>

By the way, I have a bug with the button that will try to solve by other means.

Do you know how could I solve this?

Thanks again for your help!!

  • Can you add your CSS for the background? – jsalonen Jun 08 '14 at 18:15
  • The website is live here jsalonen: www.checkinplace.com I have a simple PHP code to load a random background each time from a variable called $fileName like this: The rest of the code is this one: html { display: none; height: 100%; } I show the website when the background image has loaded. –  Jun 08 '14 at 18:18
  • most of mobile browsers not support position:fixed;. try to search iphone css fixed . let me know if you still cant do. – marathonman Jun 08 '14 at 18:18
  • Please, add the actual CSS into your question to help future visitors too. – jsalonen Jun 08 '14 at 18:19
  • Already added the code jsalonen. –  Jun 08 '14 at 18:22
  • sorry i didnot see ur code try this `` – marathonman Jun 08 '14 at 18:29
  • [**See This Post**](http://stackoverflow.com/questions/9779195/) and [**This Post**](http://stackoverflow.com/questions/3011226/) and [**This Post**](http://stackoverflow.com/questions/18429620/) – MilkyTech Jun 08 '14 at 18:31
  • Finally did it using one of your posts Chris: Background image Thanks. –  Jun 08 '14 at 19:06

2 Answers2

0

What you can do is stretch the background image. You can do so by replacing background-size:cover; with background-size:100% 100%;

Your css code would look like this:

<style>html { background: url(/site/assets/img/backgrounds/background.jpg) no-repeat; background-size: 100% 100%; }</style>

PimDows
  • 1
  • 1
0

Already solved it by doing this:

<img alt="Background image" id="backgroundImg" src="/site/assets/img/backgrounds/<?php echo($fileName); ?>" />

#backgroundImg {
    position: fixed;

    top:  0;
    left: 0;

    min-width:  100%;
    min-height: 100%;

    z-index: -1;
}

Thanks.