1 reply [Last post]
product247
product247's picture
Offline
newbie
St Petersburg
Last seen: 5 years 28 weeks ago
St Petersburg
Timezone: GMT-4
Joined: 2014-05-24
Posts: 1
Points: 2

Have a mobile specific page made with one div with a background image and a form within it laying over the top of the background image. The image has to show full width but also the correct height. The image is 640px width and 615px height. I need it to look good on retina and non-retina screens. I cannot get this to work. I have placed the code below. I added the head code in the html doc so that wasn't questioned. Thanks in advanced!

CSS

#order1 {
	background-image: url(images/background.png);
	background-repeat: no-repeat;
	width:320px;
	height:615px;
 
}

HTML
<!doctype html>
<head>
<META content="IE=11.0000" http-equiv="X-UA-Compatible">
<meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<meta charset="utf-8">
<div id="order1"><form>..form code here...</form></div>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 16 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi product247, What's

Hi product247,
What's actually not working?
Background-size might be what you are after.