Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Michael Morris
Michael Morris
675 Points

Heading bleeding into banner on resize

I like this design in full screen. The problem is when I resize smaller the white heading crosses over the dark middle banner. I need the heading to maintain it's position and not go near the middle banner. I also need the F back ground image to stay in the middle when resized. My website is www.michaelmorris.website

<!doctype html>

<html lang="en"> <head> <meta charset="utf-8">

<title>The HTML5 Herald</title> <meta name="description" content="The HTML5 Herald"> <meta name="author" content="SitePoint"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="Main.css">

<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

</head>

<body>

   <div class="wrapper">










  <div class="michael">
        <p class="m">Michael</p>
        </div>

</div> </body> </html>

body{ margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; width: 100%; height: 100%; }

body{

background-image: url("Images/Top Banner.jpg"), url("Images/Middle Banner.jpg"), url("Images/Bottom Banner.png");
 background-size: 100% 10%, 100% 20%, 100% 100%; 
 background-repeat: no-repeat;
 background-attachment: fixed;   
}

.wrapper { width: 800px; height: 800px; margin-left: auto; margin-right: auto; margin-top: 11px; /* padding: 0 5%; */

}

.michael { width: 100%; height: 5%; background-color: #FFFFFF;

/* max-width: 100%; */
/* max-height: 100%; */

}

.ringhead { width: 10%; height: 5%;

}

.ring{

position: absolute; /* max-width: 100%; / / max-height: 100%; */ float: left;

left: 49%; 
 top: 3%; 

max-width: 100%;
max-height: 100%;

}

.christina {

width: 10%;

height: 5%;

border: 1px white;
/* max-width: 100%; */
/* max-height: 100%; */

margin: 0px;

}

.c{

color: #EEE8AA;
max-width: 100%;
max-height: 100%;
 text-transform: uppercase;
 position: absolute;

 font-size: 1.8em;
right: 23%; 
top: 4%; 
 font-style: italic;

}

.date{ border-color: white; width: 100%; height: 1%;

}

.d{

  color: #EEE8AA;
position: fixed;
text-transform: uppercase;
font-size: 1.5em;

 font-style: italic;

/* max-width: 100%; */
/* max-height: 100%; */

left: 45%; 
top: 20%;

max-width: 100%;
max-height: 100%;
  padding-left: 0%;
  padding-right: 0%;
  margin-right: 20%;

}

.weddingWebsite{

 width: 100%;
 height: 20%;

}

.wedding{

    border-style: double;
border-color: #EEE8AA;
position: fixed;
 top: 100%;
 left: 55%;
 transform: translateX(-55%) translateY(-100%);
 max-width: 70%;
max-height: 70%;

}