Login | Register | FAQ
Anonymous

How to Align Two Background Images?

+ Post a reply

2 posts Page 1 of 1


How to Align Two Background Images?

by cjr » Sun Jul 27, 2014 8:06 pm

I want to align two background images; one at the top and one on the bottom of page just as you see on this (The black header and footer images seen on the top and very bottom).

How is this accomplished?
User avatar

cjr

  • Posts: 14
  • Joined: Fri Jun 06, 2014 2:27 pm

Re: How to Align Two Background Images?

by XainPro » Sun Aug 10, 2014 8:41 pm

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Full Width Header/Footer Example 3</title>
<style type="text/css">
/*CSS RESET*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

strong {
font-weight:bold;color:#0289ce;
}

em {
font-style:oblique;
}

p {
margin:15px 0;
}

.aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}

h1 {font-size:180%;}
h2 {font-size:150%;}
h3 {font-size:125%;}
h4 {font-size:100%;}
h5 {font-size:90%;}
h6 {font-size:80%;}

a:link {color:#0289ce;}
a:hover {color:#f64274;}


/*End RESET - Begin Full Width CSS*/
body {
background:#000;
color:#fff;
font:13px Helvetica, Arial, sans-serif
}

.wrap {
margin:0 auto;
width:900px;
}

#header, #footer {
float:left;
padding:15px 0;
min-width:100%;
}

#header {
background:#666;
}

#header .logo {
float:left;
width:400px;
}

#header p {
float:right;
width:400px;
margin:0;
}

#content {
padding:15px 0;
clear:both;
}

#footer {
background:#333;
text-align:center;
/*To anchor to bottom of page uncomment the following lines:*/
/*position:fixed;
bottom:0;*/
}

#footer a {
color:#fff;
}

</style>
</head>

<body >

<div id="header">
<div class="wrap">
<div class="logo">
<a href="#">LOGO</a>
</div>
<p>HEADER This site is amazing!</p>
</div>
</div>

<div class="wrap">
<div id="content">
<h1>Full Width Header and Footer</h1>
<p>Here is another updated version of my method to create a full width header and footer, that contains centered content!</p>


</div>
</div>

<div id="footer">
<div class="wrap">
<p>&copy; 2014 - FOOTER </p>
</div>
</div>
</body>
</html>
User avatar

XainPro

  • Posts: 3933
  • Joined: Fri Feb 17, 2012 8:10 pm


+ Post a reply

Page 1 of 1