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

Collecting data from an HTML form filled out by users

I need a way to capture user input from an HTML form and display it later on my website. I want to show all the information users provide along with their pizza selections. I've been struggling for hours trying to make this work without success :( Spe ...

javascripthtmlcss

Discover the method for creating URLs that are relative to the specific domain or server on which they are hosted

I need to adapt my menu bar to cater for different server environments: <a href="http://staging.subdomain.site.co.uk/search/page">Menu</a> The main source site is hosted on an external subdomain from an API service, and I want the URLs in my ...

javascripthtmlurlhyperlink

Resolving odd SVG anomalies

I recently exported three SVGs from Sketch to include in HTML, but one of them (specifically the Twitter icon) is presenting a mystery with its appearance. All three SVGs were created in the same manner, using #999999 as the stroke color and having a stro ...

htmlcsssvgsketchapp

Is there a way to upload an image without utilizing or concealing the `<input type='file' />` element?

Currently, I am developing a PHP script that retrieves the directories and files from specified local computer drives. The goal I am striving for is to enable users to upload an image to my server by clicking on its name from the listing, without using th ...

phphtmlajaxuploadimage-uploading

Whenever I insert an http link for FontAwesome, the icons work perfectly fine. However, when I try to host it locally,

After providing the CDN link: <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"> The icons are displaying correctly and everything is working fine. You can view the code on ...

htmlcssfrontendfont-awesomeweb-frontend

Retrieve an HTML element that is a select option with jQuery

I have a select input containing different options as shown below: <select id="myArea"> <option class="myClass_1" style="color:red;" value="1">Area 1</option> <option class="myClass_2" style="color:green;" value="2">Area 2& ...

javascriptjqueryhtmlhtml-select

"Exploring the Power of Angular with HTML Checkboxes

I am trying to display a checkbox as either checked or unchecked based on the value of a variable {{CurrentItem.STATUS}}, which can be either 1 or 0. Is there an Angular solution that does not require any javascript/typescript to achieve this? I want the ...

htmlangularcheckbox

CSS - Organization of Rows and Columns

I am in the process of designing a website that will feature news content, and I would like to give it a layout similar to a reddit news box. The layout would resemble the following structure. I am using angular material and CSS exclusively, without any fr ...

htmlcss

Unable to center label when adjusting TextField height beyond default

I was tasked with reducing the size of the MUI Component TextField by 4px. To achieve this, I modified the root & .MuiOutlinedInput-input. Although it adjusted the height as desired, the label (Email) is no longer vertically centered. I attempted to so ...

cssreactjsmaterial-ui

spill the elements from one div into another div

I'm facing a situation where I have 2 divs on a page, with the first div containing text content only. The issue is that when the content of the first div overflows, it gets cut off due to the CSS applied to it: .one { overflow: hidden; width: 1 ...

javascriptjqueryhtmlcss

Operating my application on a 2G network

Overview of my mobile application: I have created a simple HTML/CSS/JavaScript-jQuery app using PHONEGAP. The app utilizes a WCFService on a server for database communication, which is accessed through AJAX calls. After building and testing the applicati ...

jqueryhtmlmobilemobile-application

What steps can I take to make this menu more leisurely?

I've been experimenting with creating a horizontal menu using HTML and CSS. <section class="latest-albums-area section-padding-100"> <div class="container"> <div class="row"> ...

htmlcsswebweb-deployment

Ensuring consistency in aligning float elements

I've been struggling to create a concept design for my internship project. I aim to have a page with six clickable elements (images). When one is clicked, the others should disappear and the active one moves to the top. I managed to achieve this using ...

javascriptjqueryhtmlcss

The presence of Bootstrap remains hidden unless space is designated for it

Question about Bootstrap 5.1.3: Is there a way to hide elements on a page using the bootstrap class ".invisible" without allocating space for them? Currently, when the elements are set to visible using the class ".visible", they occupy space on the page ...

javascriptcsstwitter-bootstrapbootstrap-5

Managing post and session data during PHP form submission

I've encountered an issue with my code structure. What I aim to achieve is: To validate if post values exist, then execute the query and show the results. If post values are not present, check for a session value. If session is available, manipulate ...

phphtmlformsif-statementisset

Dropdown Navigation - Utilizing jQuery and CSS

I am encountering an issue with a dropdown menu I have been working on. Take a look at this screenshot for reference: Below is the snippet of HTML code: <ul class="topnav"> <li><a href="#">Home</a></li> <li> ...

jqueryhtmlcssmenudrop-down-menu

Struggling to make changes to a Styled Component in a React application

In a certain file, I have a BaseComponent composed of various other components and being exported. The top level of the BaseComponent contains a wrapper responsible for managing margins. When I export it and attempt to override some styles with: //other fi ...

javascriptcssreactjsstyled-components

What is the best way to get this paragraph element to rise upwards?

Everything in my code is working perfectly except for the last paragraph tag. I need to position it in the center of the blue rectangle created by the div with class "defaultButtonStyle." I've tried using margin-top in the CSS without success. Any oth ...

htmlcssmarginmove

Triggering a JQuery Toggle Button

This is the code I'm currently working with: $('.access a').toggle(function() { $('link').attr('href', 'styles/accessstyles.css'); $('body').css('font-size', '16px'); }, fu ...

javascriptjqueryhtmljquery-uitoggle

Is a CSS-only autoexpanding label possible within a list?

I am interested in having all the labels automatically expand to the size of the widest one. Below is the HTML structure: <div class="body"> <ul class="list"> <li> <span> <label>condition</label> ...

htmlcss