Zaloguj | Zarejestruj | FAQ
Anonymous

How to Align Two Background Images?

+ Odpowiedz

Posty: 2 Strona 1 z 1


How to Align Two Background Images?

przez cjr » N lip 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?
Avatar użytkownika

cjr

  • Posty: 14
  • Dołączył(a): Pt cze 06, 2014 2:27 pm

Re: How to Align Two Background Images?

przez XainPro » N sie 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>
Avatar użytkownika

XainPro

  • Posty: 3933
  • Dołączył(a): Pt lut 17, 2012 8:10 pm


+ Odpowiedz

Strona 1 z 1