Html - How do i put a header element on top of an svg background

MikeMitchell
June 14, 2023
252 views
0 votes
2 Answers

I am trying to place my header element onto my svg background while still having the immersive svg background running but it wont work. Is there a way to place the header element in the center of the svg background while still maintaining/using the immersive background and the class "box_shadow_header"?

   
    section {
        position: relative;
        width: 100%;
        height: 100vh;
        background:  #28407D;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    section .row {
        position: relative;
        width: 100%;
        display: flex;
        padding: 10px 0;
        white-space: normal;
        font-size: 64px;
    }
    svg:hover {
        transition: 0s;
        color: #B09B45;
        text-shadow: 0 120px 120px #B09B45;
    }
    svg {
        color: #3450B6;
        transition: 1s;
        padding: 0 5px;
        user-select: none;
        cursor: default; 
    }
    

    /* Style rules for header content*/
    header {
        text-align: center;
        font-size: 3em;
        color: white;
    }

    header h1 {
        font-family: 'Bagel Fat One', cursive;
        font-family: 'Tilt Prism', cursive;
        font-weight: bold;
    }
    header h3 {
        font-family: 'Bagel Fat One', cursive;
        font-family: 'Tilt Prism', cursive;
        font-weight: bold;
        font-style: italic;
    }
    .box_shadow_header {
        background-color: #28407D;
        color: white;
        padding: 10px;
        margin: 1px 1px 1px 1px;
        border-radius: 4px;
        box-shadow: 2px 2px 20px 23px #3450B6;
    }

<section>
       <header class="box_shadow_header">
        <h1>Brew City</h1>
        <h3>Brew. Share. Drink Responsibly.</h3>
    </header>
        <div id= "row" >
            <div>
                <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 2048 2048"><path fill="currentColor" d="M1600 512q66 0 124 25t101 69t69 102t26 124v512q0 66-25 124t-69 102t-102 69t-124 25h-64v192q0 40-15 75t-41 61t-61 41t-75 15H320q-40 0-75-15t-61-41t-41-61t-15-75V477q-59-34-93-93T0 256q0-52 20-99t54-81t81-55t99-21h1154q53 0 99 20t82 55t55 81t20 100q0 35-9 69t-26 64t-41 56t-52 43v24h64zM255 128q-26 0-49 10t-41 27t-27 41t-10 50q0 40 23 73t62 47l43 15v569q0 26 19 45t45 19q26 0 45-19t19-45V576q0-40 15-75t41-61t61-41t75-15q40 0 75 15t61 41t41 61t15 75v256q0 26 19 45t45 19q26 0 45-19t19-45V576q0-40 15-75t41-61t61-41t75-15h371q33-16 55-52t22-76q0-27-10-50t-27-40t-41-28t-50-10H255zm1153 1728v-76q-15 5-31 8t-33 4H320q-17 0-33-3t-31-9v76q0 26 19 45t45 19h1024q26 0 45-19t19-45zm-64-192q26 0 45-19t19-45V512h-320q-26 0-45 19t-19 45v256q0 40-15 75t-41 61t-61 41t-75 15q-40 0-75-15t-61-41t-41-61t-15-75V576q0-26-19-45t-45-19q-26 0-45 19t-19 45v384q0 40-15 75t-41 61t-61 41t-75 15q-33 0-64-11v459q0 26 19 45t45 19h192v-448q0-27 19-45t45-19q26 0 45 18t19 46v448h384v-576q0-27 19-45t45-19q26 0 45 18t19 46v576h192zm448-320V832q0-40-15-75t-41-61t-61-41t-75-15h-64v896h64q40 0 75-15t61-41t41-61t15-75z"/></svg>
            </div>
        </div>
</section>

Answers

Here are two examples where I use CSS Grid. I’m not sure exactly what is should look like, but in principle I use the following methods:

Example 1: The h1, h3 and SVG are placed in their own cell in the grid. The only thing that controls the spacing between the elements are the margin on h1 and h3. Well, you could do the same without grid, but grid can order the elements.

Examples 2: The h1 and SVG are placed in the same cell and ordered using z-index. To make the hover work on the SVG the pointer-events property is none on h1.

section {
  background: #28407D;
}

svg:hover {
  transition: 0s;
  color: #B09B45;
  text-shadow: 0 120px 120px #B09B45;
}

svg {
  color: #3450B6;
  transition: 1s;
  padding: 0 5px;
  user-select: none;
  cursor: default;
  grid-row: 2;
  grid-column: 1;
  place-self: center;
}


/* Style rules for header content*/

header {
  display: grid;
  text-align: center;
  font-size: 3em;
  color: white;
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr;
}

header h1 {
  font-family: 'Bagel Fat One', 'Tilt Prism', cursive;
  font-weight: bold;
  margin: .5em 0 0 0;
  grid-row: 1;
  grid-column: 1;
}

header h3 {
  font-family: 'Bagel Fat One', 'Tilt Prism', cursive;
  font-weight: bold;
  font-style: italic;
  margin: .2em 0 .5em 0;
  grid-row: 3;
  grid-column: 1;
}

.box_shadow_header {
  background-color: #28407D;
  color: white;
  padding: 10px;
  margin: 1px 1px 1px 1px;
  border-radius: 4px;
  box-shadow: 2px 2px 20px 23px #3450B6;
}

<section>
  <header class="box_shadow_header">
    <h1>Brew City</h1>
    <h3>Brew. Share. Drink Responsibly.</h3>
    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 2048 2048"><path fill="currentColor" d="M1600 512q66 0 124 25t101 69t69 102t26 124v512q0 66-25 124t-69 102t-102 69t-124 25h-64v192q0 40-15 75t-41 61t-61 41t-75 15H320q-40 0-75-15t-61-41t-41-61t-15-75V477q-59-34-93-93T0 256q0-52 20-99t54-81t81-55t99-21h1154q53 0 99 20t82 55t55 81t20 100q0 35-9 69t-26 64t-41 56t-52 43v24h64zM255 128q-26 0-49 10t-41 27t-27 41t-10 50q0 40 23 73t62 47l43 15v569q0 26 19 45t45 19q26 0 45-19t19-45V576q0-40 15-75t41-61t61-41t75-15q40 0 75 15t61 41t41 61t15 75v256q0 26 19 45t45 19q26 0 45-19t19-45V576q0-40 15-75t41-61t61-41t75-15h371q33-16 55-52t22-76q0-27-10-50t-27-40t-41-28t-50-10H255zm1153 1728v-76q-15 5-31 8t-33 4H320q-17 0-33-3t-31-9v76q0 26 19 45t45 19h1024q26 0 45-19t19-45zm-64-192q26 0 45-19t19-45V512h-320q-26 0-45 19t-19 45v256q0 40-15 75t-41 61t-61 41t-75 15q-40 0-75-15t-61-41t-41-61t-15-75V576q0-26-19-45t-45-19q-26 0-45 19t-19 45v384q0 40-15 75t-41 61t-61 41t-75 15q-33 0-64-11v459q0 26 19 45t45 19h192v-448q0-27 19-45t45-19q26 0 45 18t19 46v448h384v-576q0-27 19-45t45-19q26 0 45 18t19 46v576h192zm448-320V832q0-40-15-75t-41-61t-61-41t-75-15h-64v896h64q40 0 75-15t61-41t41-61t15-75z"/></svg>
  </header>
</section>

section {
  background: #28407D;
}

svg:hover {
  transition: 0s;
  color: #B09B45;
  text-shadow: 0 120px 120px #B09B45;
}

svg {
  color: #3450B6;
  transition: 1s;
  padding: 0 5px;
  user-select: none;
  cursor: default;
  grid-row: 1;
  grid-column: 1;
  place-self: center;
  z-index: 1;
}


/* Style rules for header content*/

header {
  display: grid;
  text-align: center;
  font-size: 3em;
  color: white;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
}

header h1 {
  font-family: 'Bagel Fat One', 'Tilt Prism', cursive;
  font-weight: bold;
  grid-row: 1;
  grid-column: 1;
  z-index: 2;
  pointer-events: none;
}

header h3 {
  font-family: 'Bagel Fat One', 'Tilt Prism', cursive;
  font-weight: bold;
  font-style: italic;
  margin: 0 0 .5em 0;
  grid-row: 2;
  grid-column: 1;
}

.box_shadow_header {
  background-color: #28407D;
  color: white;
  padding: 10px;
  margin: 1px 1px 1px 1px;
  border-radius: 4px;
  box-shadow: 2px 2px 20px 23px #3450B6;
}

<section>
  <header class="box_shadow_header">
    <h1>Brew City</h1>
    <h3>Brew. Share. Drink Responsibly.</h3>
    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 2048 2048"><path fill="currentColor" d="M1600 512q66 0 124 25t101 69t69 102t26 124v512q0 66-25 124t-69 102t-102 69t-124 25h-64v192q0 40-15 75t-41 61t-61 41t-75 15H320q-40 0-75-15t-61-41t-41-61t-15-75V477q-59-34-93-93T0 256q0-52 20-99t54-81t81-55t99-21h1154q53 0 99 20t82 55t55 81t20 100q0 35-9 69t-26 64t-41 56t-52 43v24h64zM255 128q-26 0-49 10t-41 27t-27 41t-10 50q0 40 23 73t62 47l43 15v569q0 26 19 45t45 19q26 0 45-19t19-45V576q0-40 15-75t41-61t61-41t75-15q40 0 75 15t61 41t41 61t15 75v256q0 26 19 45t45 19q26 0 45-19t19-45V576q0-40 15-75t41-61t61-41t75-15h371q33-16 55-52t22-76q0-27-10-50t-27-40t-41-28t-50-10H255zm1153 1728v-76q-15 5-31 8t-33 4H320q-17 0-33-3t-31-9v76q0 26 19 45t45 19h1024q26 0 45-19t19-45zm-64-192q26 0 45-19t19-45V512h-320q-26 0-45 19t-19 45v256q0 40-15 75t-41 61t-61 41t-75 15q-40 0-75-15t-61-41t-41-61t-15-75V576q0-26-19-45t-45-19q-26 0-45 19t-19 45v384q0 40-15 75t-41 61t-61 41t-75 15q-33 0-64-11v459q0 26 19 45t45 19h192v-448q0-27 19-45t45-19q26 0 45 18t19 46v448h384v-576q0-27 19-45t45-19q26 0 45 18t19 46v576h192zm448-320V832q0-40-15-75t-41-61t-61-41t-75-15h-64v896h64q40 0 75-15t61-41t41-61t15-75z"/></svg>
  </header>
</section>

Your header is centered, but the pint is not so I’ll assume you meant the pint!

I simply added text centering to the pint’s container and removed the dead (unnecessary) DIV like this…

#row {text-align:center;}


<div id= "row">
           
 <svg width="64" height="64" viewBox="0 0 2048 2048"><path fill="currentColor" d="M1600 512q66 0 124 25t101 69t69 102t26 124v512q0 66-25 124t-69 102t-102 69t-124 25h-64v192q0 40-15 75t-41 61t-61 41t-75 15H320q-40 0-75-15t-61-41t-41-61t-15-75V477q-59-34-93-93T0 256q0-52 20-99t54-81t81-55t99-21h1154q53 0 99 20t82 55t55 81t20 100q0 35-9 69t-26 64t-41 56t-52 43v24h64zM255 128q-26 0-49 10t-41 27t-27 41t-10 50q0 40 23 73t62 47l43 15v569q0 26 19 45t45 19q26 0 45-19t19-45V576q0-40 15-75t41-61t61-41t75-15q40 0 75 15t61 41t41 61t15 75v256q0 26 19 45t45 19q26 0 45-19t19-45V576q0-40 15-75t41-61t61-41t75-15h371q33-16 55-52t22-76q0-27-10-50t-27-40t-41-28t-50-10H255zm1153 1728v-76q-15 5-31 8t-33 4H320q-17 0-33-3t-31-9v76q0 26 19 45t45 19h1024q26 0 45-19t19-45zm-64-192q26 0 45-19t19-45V512h-320q-26 0-45 19t-19 45v256q0 40-15 75t-41 61t-61 41t-75 15q-40 0-75-15t-61-41t-41-61t-15-75V576q0-26-19-45t-45-19q-26 0-45 19t-19 45v384q0 40-15 75t-41 61t-61 41t-75 15q-33 0-64-11v459q0 26 19 45t45 19h192v-448q0-27 19-45t45-19q26 0 45 18t19 46v448h384v-576q0-27 19-45t45-19q26 0 45 18t19 46v576h192zm448-320V832q0-40-15-75t-41-61t-61-41t-75-15h-64v896h64q40 0 75-15t61-41t41-61t15-75z"/></svg>
         
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How do i put a header element on top of an svg background

Answers