BarrelPony BarrelPony - 7 months ago 34
HTML Question

Element hidden under another element

I need some help with a website I am building. I am new to web design,so I'm pretty confused with this problem. You see I have a a sawtooth pattern that I want over top of a header, like this:The effect I want

The problem is, my sawtooth pattern tries to hide behind the blue header. I can't for the life of me figure out why! (Excuse the mistake in the sawtooth pattern, I need to fix that.)

Css:



/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img{
margin:0;
padding:0;
}

img, fieldset {
border:none;
}

body {
padding-top:2em;
font:normal 100%/150% "segoe ui",helvetica,sans-serif;
background:#642 url(http://oi68.tinypic.com/x42exd.jpg);
color:#FFF;
}


#header2 {


background-image: url(http://i1377.photobucket.com/albums/ah69/danalavelle3/Sawtooth_zpscwam4jrq.png);

height: 20px;

width: 100%;

top: 0px;

font-size: 90px;

font-weight: bold;

color: #FFF;

text-align: center;

padding-top: 0px;

position:absolute;

}

h1 {
position:relative;
z-index: 7;
font:bold 40px/42px arial,helvetica,sans-serif;
background:url(http://www.cutcodedown.com/for_others/barrelPony/sandmannFarm/images/h1BottomStripe.png) bottom left repeat-x;
text-align:center;
margin-top:20px;

}


h1 a {
position:relative;
zoom:1; /* trip haslayout, fix legacy IE bugs */
display:block;
padding:30px 0;
text-transform:uppercase;
background:url(http://oi67.tinypic.com/33dfi86.jpg) bottom left;
color:#FFF;
text-decoration:none;
text-shadow:
0 0 2px #000,
2px 2px 3px #754;
}

h1 span {
position:absolute;
top:50%;
left:50%;
width:402px;
height:160px;
margin:-80px 0 0 -201px;
text-indent:-999em;
background:url(http://www.cutcodedown.com/for_others/barrelPony/sandmannFarm/images/h1Logo.png);
}

h1 small {
display:block;
font:bold 16px/18px arial,helvetica,sans-serif;
}

#mainMenuCheck {
/* display none breaks this in some browsers, so just slide it out of view */
position:absolute;
left:-999em;
}

#mainMenu {
position:relative; /* depth sort over h1 */
background:#754 url(images/dots.png) top left;
padding:0.75em 0 0.75em 0.75em;
/* left margin adjusts for uneven menu width, change as needed */
text-align:center;
}

#mainMenu li {
list-style:none;
display:inline;
}

#mainMenu ul:before,
#mainMenu ul:after,
#mainMenu:after,
#mainMenu a {
text-shadow:
0 0 2px #000,
2px 2px 2px #000,
2px 2px 3px #000;
}

#mainMenu a {
display:inline-block;
vertical-align:bottom;
text-decoration:none;
color:#F0E8E0;
-webkit-transition:color 0.3s, text-shadow 0.3s;
transition:color 0.3s, text-shadow 0.3s;
}

#mainMenu a.current {
color:#AEF;
}

#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
color:#0FF;
}

#mainMenu a:after {
display:inline-block;
padding:0 0.1em 0 0.5em;
color:#FFF;
}

#mainMenu .lastInSet a:after {
display:none;
}

#mainMenu .setBreak {
padding-right:8em;
}

#mainMenu a:after,
#mainMenu:after,
#mainMenu ul:before,
#mainMenu ul:after {
content:"\2605";
font-family:"arial unicode ms","dejavu sans",lastresort,sans-serif;
}

#mainMenu:after,
#mainMenu ul:before,
#mainMenu ul:after {
position:absolute;
left:50%;
width:3em;
bottom:0.65em;
}

#mainMenu:after {
bottom:0.2em;
font-size:150%;
margin-left:-1.5em;
}

#mainMenu ul:before {
margin-left:-3em;
}

@media (min-width:1px) { /* sneaky trick to target just CSS3 browsers */
/*
h1 span {
background:url(images/h1Logo2x.png);
background-size:cover;
}
uncomment for 2x resolution logo support
*/
}

@media (max-width:50em) {
#mainMenu {
padding:1em 0 0.5em;
}
#mainMenu ul {
max-width:25em;
margin:0 auto;
}
#mainMenu .setBreak {
padding-right:0;
}
/*
restyle menu to 'mobile friendly' finger-sized targets
*/
#mainMenu:after,
#mainMenu a:after,
#mainMenu ul:before,
#mainMenu ul:after {

}
#mainMenu a {
padding:0.5em 1em;
margin:0 0.15em 0.5em;
background:rgba(0,0,0,0.3);
-webkit-border-radius:1em;
border-radius:1em;
}
}

@media (max-width:26em) {
body {
padding-top:0;
}
h1 {
text-align:left;
font:bold 150%/120% arial,helvetica,sans-serif;

}
h1 a {
padding:0.25em 3em 0.25em 0.25em;

}
h1 small {
font:bold 80%/120% "segoe ui",arial,helvetica,sans-serif;
padding-bottom:15px;

}
h1 span,
#mainMenu:before {
display:none;
}
#mainMenuCheck + label {
position:absolute;
z-index:99;
right:0.25em;
top:0.3em;
width:3em;
padding:0.5em 0;
background:#488;
border:0.25em solid #FFF;
-webkit-border-radius:0.75em;
border-radius:0.75em;
display:none;
}
#mainMenuCheck + label:hover {
background:#6BB;
display: none;
}
#mainMenuCheck + label:before,
#mainMenuCheck + label:after {
content:"";
display:block;
height:0.5em;
margin:0 0.5em;
border:solid #FFF;
border-width:0.25em 0;


}
#mainMenuCheck + label:after {
border-width:0 0 0.25em;

}
#mainMenu {
display:none;
padding:0.5em 0.5em 0;
}
#mainMenuCheck:checked ~ #mainMenu {
display:block;


}
}


/**MENU**/

@media (min-width:52em) {

.header {
display: none;
}

.menu {
display: none;
}


}

@media (max-width:52em) {

body {
margin:;
font-family: font:bold 16px/18px arial,helvetica,sans-serif;
background-color: #f4f4f4;
text-shadow:
0 0 5px #000,
5px 5px 5px #754;

}

a {
color: #F8F4E6;
}

.menu a:before,
.menu ul:before,
.menu ul:before {
content:"\2605";

}


/* header */

.header {
background-color:#6A4E39;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: relative;
width: 100%;
z-index: 3;


}

.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-image:none;

}

.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}

.header li a:hover,
.header .menu-btn:hover {
background-color:#4EB4AC;

}

.header .logo {
display: block;
float: left;
font-size: 15px;
padding: 10px 20px;
margin-top: 5px;
text-decoration: none;
}

/* menu */

.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}

/* menu icon */

.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}

.header .menu-icon .navicon {
background: #F8F4E6;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #F8F4E6;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}

.header .menu-icon .navicon:before {
top: 5px;
}

.header .menu-icon .navicon:after {
top: -5px;
}

/* menu btn */

.header .menu-btn {
display: none;
}

.header .menu-btn:checked ~ .menu {
max-height: none;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
}

/* 48em = 768px */

@media (min-width: 52em) {
.header li {
float: left;

}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}

@media (max-width: 52em) {
#mainMenu {
display: none;
justify-content: center;
}


/* section */

.section {
overflow: hidden;
margin: auto;
max-width: 1400px;
}

.section a {
position: relative;
float: left;
width: 100%;
}

.section a img {
width: 100%;
display: block;
}

.section a span {
color: #fff;
position: absolute;
left: 5%;
bottom: 5%;
font-size: 2em;
text-shadow: 1px 1px 0 #000;
}

.section-split a span {
display: none;
}

.section-split a:hover span {
display: block;
}


/* 48em = 768px */

@media (min-width: 48em) {
.section-split a {
width: 50%;
}
}

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<link rel="stylesheet" href="screen.css" media="screen,projection,tv">
<title>Sandmann Farm</title>
</head><body>


<div id="header2"></div><!--end of header -->

</div><!--end of container -->

<h1>
<a href="/">
Sandmann Farm
<span>-</span>
<small>EST. 1975</small>
</a>
</h1>
<div id="container">




<input type="checkbox" id="mainMenuCheck">
<label for="mainMenuCheck"></label>

<div id="mainMenu">
<ul>

<li><a href="#" class="current">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">What We Do</a></li>
<li class="lastInSet setBreak"><a href="#">Events</a></li>

<li><a href="#">Success Stories</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Events</a></li>
<li class="lastInSet"><a href="#">Blog</a></li>

</ul>

<!-- #mainMenu --></div>


<link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css" />
<header class="header">
<a href="/" class="logo">Navigation</a>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li><a href="#work"> Home</a></li>
<li><a href="#about"> About</a></li>
<li><a href="#careers"> What We Do</a></li>
<li><a href="#contact"> Success Stories</a></li>
<li><a href="#contact"> Contact</a></li>
<li><a href="#contact"> Events</a></li>
<li><a href="#contact"> Blog</a></li>
</ul>
</header>


<img src="https://41.media.tumblr.com/a084ee9dfc98ea3b1243a27c35c87e65/tumblr_mmxchsAxbB1rbpdkgo1_500.jpg">



</body></html>





Thanks in advance!

Answer

Before an answer I need to write one important thing: write your questions the right way and use MCVE.

Okey, now the answer.

  1. Remove background property from your a in the h1.

  2. Remove completely #header2 (it won't be used unless you will move whole header there).

  3. Use this CSS to set h1's background (you can put rest of your rules into it):

h1 {
    background-image: url(http://www.cutcodedown.com/for_others/barrelPony/sandmannFarm/images/h1BottomStripe.png), url(http://oi67.tinypic.com/33dfi86.jpg);
    background-repeat: repeat-x, repeat;
    background-position: bottom left, bottom left;
}

Here you can learn more about multiple backgrounds: W3Schools.