I have looked everywhere for the answer but cannot find it. I am trying to make the background image on my landing page www.privateocean.com/business responsive so it looks correct on an iphone screen. Would anyone be able to help me solve this?
1. You have a bunch of empty paragraphs under your text that are pushing your form down on mobile. Removing these would cause your form to move up, which would make the section shorter, which would make your image smaller.
2. Your background image css. Currently you have background-size: set to cover. This is going to cause your image to do exactly that: cover the element that it is the background of. It will resize the image proportionately, cropping the left and right or top and bottom, to ensure that the image covers the entire section. Look here.
Options:
1. Make the section smaller. removing those stray paragraphs will help, but the shorter the section is on mobile the small the image is going to be. Shrink your text, form wrap's padding, input field padding and font-size and line-hieght, etc. If you can get your text and your form in the view at the same time then your image will probably be sized the way you want.
2. have the image recreated for mobile then use a media query to switch background images at a specific width. You have very specific visuals in your background image so positioning to show these specific visuals will be a pain. Creating a swapping for a mobile version might be an easier solution.
3. media queries and background-position and background-size. Check out the link above. You can use em, px, %, vh, vw, and pt to position your image. you can use background: 100% auto; (or a larger percentage like 200% auto) to make your image width dependant only instead of width and height dependant. going above 100% will cause cropping but will make the images height larger, which you may need to still cover the section.
1. You have a bunch of empty paragraphs under your text that are pushing your form down on mobile. Removing these would cause your form to move up, which would make the section shorter, which would make your image smaller.
2. Your background image css. Currently you have background-size: set to cover. This is going to cause your image to do exactly that: cover the element that it is the background of. It will resize the image proportionately, cropping the left and right or top and bottom, to ensure that the image covers the entire section. Look here.
Options:
1. Make the section smaller. removing those stray paragraphs will help, but the shorter the section is on mobile the small the image is going to be. Shrink your text, form wrap's padding, input field padding and font-size and line-hieght, etc. If you can get your text and your form in the view at the same time then your image will probably be sized the way you want.
2. have the image recreated for mobile then use a media query to switch background images at a specific width. You have very specific visuals in your background image so positioning to show these specific visuals will be a pain. Creating a swapping for a mobile version might be an easier solution.
3. media queries and background-position and background-size. Check out the link above. You can use em, px, %, vh, vw, and pt to position your image. you can use background: 100% auto; (or a larger percentage like 200% auto) to make your image width dependant only instead of width and height dependant. going above 100% will cause cropping but will make the images height larger, which you may need to still cover the section.
