• Locked
2 replies [Last post]
Fri, 2017-12-01 08:33
Bluenose
Bluenose's picture
Offline
Enthusiast
Last seen: 3 years 27 weeks ago
Timezone: GMT+1
Joined: 2011-10-11
Posts: 96
Points: 136

Hello

In the following code, where I am attempting to have the background image cover the whole screen with a view, eventually, to having a transparent contact form overlaying it, is it important to specify the dimensions of the background image?

 
	<style>
		#bg {
			position:fixed; 
			top:-50%; 
			left:-50%; 
			width:200%; 
			height:200%;
		}
		#bg img {
			position:absolute; 
			top:0; 
			left:0; 
			right:0; 
			bottom:0; 
			margin:auto; 
			min-width:50%;
			min-height:50%;
		}
 
		#page-wrap { position: relative; 
		z-index: 2; 
		width: 400px; 
		margin: 50px auto; 
		padding: 20px; 
		background: white; -moz-box-shadow: 0 0 20px black; 
		-webkit-box-shadow: 0 0 20px black; 
		box-shadow: 0 0 20px black; 
		}
 
		p { font: 15px/2 Georgia, Serif; 
		margin: 0 0 30px 0; 
		text-indent: 40px; }
 
	</style>
 
</head>
 
<body>
 
	<div id="page-wrap">
 
<p>Form field</p>
<p>Form field</p> 
<p>Form field</p> 
 
	</div>
 
	<div id="bg">
		<img src="images/bg.jpg" alt="">
	</div>
 
 </body>

Thank you!

Top
Tags:
Fri, 2017-12-01 19:25
#1
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 years 3 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

See markup below

Take care. Text over a bg image may be hard to read and adds nothing to the user experience.

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content=
	    "width=device-width, height=device-height, initial-scale=1"
            name="viewport">
 
    <title>
      Test document
    </title>
 
    <style type="text/css">
    /*<![CDATA[*/
 
    body {
	background-color: white;
	background-image: url("/images/bg.jpg")
	background-size: cover;
	background-position: center;
	color: black;
	font: 100%/1.5 sans-serif;
	margin: 0;
	padding: 1em;
    }
 
    p {
	font-size: 1em;
    }
 
    form {
	background-color: transparent;
	border: 1px solid black;
	margin: 0 auto;
	padding: 1.5em;
	width: 25em;
    }
 
    label {
	display: block;
	margin: 1em 0;
    }
 
    h1 {
	margin-top: 0;
    }
 
    /*]]>*/
    </style>
  </head>
 
  <body>
    <form action=""
	    method="">
      <h1>
	Subscription form
      </h1>
 
      <fieldset>
	<legend>
	  Contact info
	</legend>
 
	<label for="name">
	  Name
	  <input type="text"
		  name="name"
		  id="name">
	</label>
 
	<label for="email">
	  Email
	  <input type="text"
		  name="email"
		  id="email">
	</label>
      </fieldset>
    </form>
  </body>
</html>

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
Thu, 2017-12-14 23:13
#2
Bluenose
Bluenose's picture
Offline
Enthusiast
Last seen: 3 years 27 weeks ago
Timezone: GMT+1
Joined: 2011-10-11
Posts: 96
Points: 136

Many thanks for the, Gary -

Many thanks for the, Gary - appreciated!

Top
  • Locked