Another element concealing an element underneath

I am currently working on a website and could really use some assistance. Being new to web design, I find myself puzzled by this particular issue. The problem I'm facing is with a sawtooth pattern that should be displayed over a header, similar to the effect shown in this image.

The challenge lies in the fact that my sawtooth pattern seems to be hiding behind the blue header instead of overlaying it as intended. Despite noticing the error in the pattern itself, I am unable to determine why this overlap issue persists.

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;
  justify-content: center;
}
}

/**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;
}

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

.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;
}

.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;
  }


/* 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>

Any help or guidance would be greatly appreciated!

htmlcss

Answer №1

Just a quick note before I share the answer: make sure to ask your questions in the right format and consider using MCVE.

Now, onto the solution.

  1. Start by removing the background property from your a within the h1.

  2. Next, completely eliminate #header2 (unless you plan on moving the entire header there).

  3. Try using this CSS to set the background for the h1 element (you can include the rest of your styles within this block):

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;
}

To learn more about using multiple backgrounds, check out this resource from W3Schools.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using the responsive design mode may not accurately reflect the mobile user experience

Recently, I've been working on designing a new cover for my book using HTML and CSS. After completing the design, I previewed it in Responsive Design mode on both Firefox and Google Chrome. However, when I tried to view the website on my phone (a Gala ...

htmlcssresponsive-design

Generating HTML widgets dynamically with jQuery: A step-by-step guide

Looking for a way to display an interactive widget on your page while allowing users to generate multiple instances and interact with them simultaneously? Imagine having a widget like this: <div id="my_widget"> <script type="text/javascript" ...

javascriptjqueryhtmlajaxwidget

Most effective strategy for optimizing web font loading considering caching and load speeds

When it comes to embedding fonts in your web app, there are a few different methods you can use. Method A) One way is to utilize the Google Fonts CDN by inserting this code into your HTML: <link href="https://fonts.googleapis.com/css2?family=Roboto:wg ...

htmlcssfont-face

Unable to assign the value of 'innerHTML' to a null property during an AJAX request

I have searched through numerous articles on this site, but I haven't been able to find the solution I'm looking for. Every time I click a cell in my custom div table, I receive the frustrating message "Cannot set property 'innerHTML' ...

javascriptphphtmlajax

AngularJS combined with jVectorMap allows for the seamless rendering of small interactive

I am facing a similar issue to one discussed here, but with some minor differences. Initially, my map loaded without any problem on the site. However, after adding Angularjs to the site, I noticed a 'small' map issue. It seems like a simple code ...

javascriptjquerycssangularjsjvectormap

Issue with Google Maps functionality within the jQuery easytabs platform

Upon clicking the contact tab, the gmaps loads but unfortunately only shows the left corner of the map. Quite intriguing... Any thoughts on how to fix this? Here is the corresponding jsfiddle This is the structure of my HTML code: <div id="menu-contai ...

jqueryhtmlcssgoogle-maps

Filter out the selection choice that begins with 'aa' in the drop-down menu

Here is a select field with various options: <select id="sel"> <option value="1">aadkdo</option> <option value="2">sdsdf</option> <option value="3">aasdfsddkdo</option> <option value="4"> ...

javascriptjqueryhtml

Tips on aligning an entire text in R Markdown using the bookdown::gitbook function as the desired output

I've been looking for a way to justify the text in my gitbook, but haven't had any luck finding a solution. I've attempted: Adding "text-align: justified" to the CSS right after the YAML Header: <style> body { text-align: justify ...

htmlcssr-markdownbookdowngitbook

Unable to properly load the Kendo Tree View based on the selected option from the combo box in the Kendo UI framework

I am encountering an issue where the Kendo treeview is not populating with different values based on a selection from the Kendo combo box. I have created a JSFiddle to showcase this problem. http://jsfiddle.net/UniqueID123/sample In the scenario provided ...

javascriptjqueryhtmlkendo-uikendo-treeview

Utilize a single submit button to navigate through multiple pages dynamically using JavaScript

I would like to navigate to different rooms with just one button using JavaScript. For instance, there are three rooms: "Kitchen, Toilet, and Bedroom". How can I utilize JS to enter any of these rooms based on my selection? If I input "kitchen" in the text ...

phpjavascripthtmlinputvalidating

Converting CSS specific to a particular vendor: A step-by-step

Looking for a method to adapt a CSS file containing only -moz-css-property references to include compatibility with Chrome, Safari, and other browsers. Ideally seeking a user-friendly web application that can perform this task seamlessly. ...

css

Ways to customize the default CSS styles of angularJS for elements like search box and more

Looking for a way to customize the appearance of an AngularJs search box? <div ng-controller="PersonListCtrl"> <div class="bar">Search: <input ng-model="query"> </div> <ul cl ...

cssangularjs

Clickable link remains functional after being hidden

Even though I have hidden the Games-div using the .hide() function in jQuery, my links are still clickable. Is there a way to make them unclickable after being hidden? Here is the link to my code on jsFiddle: http://jsfiddle.net/hypertje/Frv8G/ Note: The ...

jqueryhtmlcss

Change the text inside a container without losing any associated event listeners using JavaScript or jQuery

Here is the HTML code: <div id="div001"> This is ${Row.1}. <p>${Row.2} explain something else.</p> <p>${Row.3} welcome you. <span>${Hello.World}, this is a new world.</span></p> </div> My objective is ...

javascriptjqueryhtml

Choosing several buttons in typescript is a skill that every programmer must possess

I need help with selecting multiple buttons in TypeScript. The code I tried doesn't seem to be working, so how can I achieve this? var input = document.getElementById('input'); var result = document.getElementById('result'); v ...

javascripthtmlcsstypescript

Why is the radio button getting bound to the error instead of the label?

I'm currently working on validating radio buttons in a GSP file using the jQuery validation plugin. The issue I'm facing is that the error message is being bound to the first radio button and appearing at the bottom of it. Instead of displaying ...

jquerycssgsp

What is the best way to manage DOM modifications in a responsive design layout?

Developing a responsive website with only one breakpoint can be challenging, especially when restructuring the DOM to accommodate different screen sizes. It's important to consider not just CSS and media queries, but also how the elements are arranged ...

javascriptjquerycssdomresponsive-design

What is the best way to upload multiple files in Laravel using Guzzle?

Currently, I am facing an issue while trying to upload files to an external server using JWT for authentication. Here is a snippet of my form: <form action="{{ route('operations.photos-for-families.upload', [$operation, $current->index ...

phphtmllaravelguzzle

Creating a responsive design with dynamic width using HTML and CSS to handle overflow situations

Struggling to figure out how to achieve this in html, I would like the solution to be limited to just html + css. Javascript/jquery is being utilized on the site, yet I don't want my design to rely on javascript. Section A contains a list of variable ...

csshtml

What is the purpose of applying the two unique class names (root and disabled) to the DOM in order for it to function correctly?

When it comes to customizing components using material-ui, the process can be a bit tricky. Here's how you can do it: const styles = { root: { '&$disabled': { color: 'white', }, }, disabled: {}, // This is i ...

cssreactjsmaterial-uijsscss-specificity