How to overlap images in the header section?


Tags: html,css,header

Problem :

How do you overlap two images in the header section? I want one of the images to be the background and the other to be on top of that image but floating left. How would you position it? or is it better to use CSS and how? Please keep in mind that i am newbie in web designing. Thank you!

<div style="position:relative; left:0; top:0;">
    <h1>
     <img src="C:\Users\zacfre9292\Desktop\Favorite Music\JSC2.jpg" alt="Jesus Culture logo" width="1900" height="197">
    </h1> 

   <h1>
    <img src="C:\Users\zacfre9292\Desktop\Favorite Music\jesusculture logo.png" alt="Jesus Culture logo" width="700" height="200" >
   </h1>
</div>


Solution :

Use a div with a image as background, then let the other image (and the header's content, if you have it) inside the div. Example:

body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#headerbg {
  width: 100%;
  height: 150px;
  position: relative;
  background: url('http://i.imgur.com/3S4zuof.gif');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
<div id="headerbg" alt="image" style="text-align:center;">
<img src="http://i.imgur.com/Goy7oBy.gif" alt=logo style="max-height:150px">
</div>


    CSS Howto..

    CSS: How to get this overlay to extend 100% with scrolling?

    how to fix a display difference between chrome and firefox for css relative position?

    How to implement geometric div backgroud shapes in css

    CSS : How to give different spacers within the same navigation menu

    How does free hosting website work? [closed]

    How can I make the menu to wrap when I resize my browser?

    How to don't include the google font css in one specific button only?

    How to style multiple instances differently of the same jquery control?

    How to increase a counter variable after a callback of a setTimeout-function?

    How can I show an absolutely positioned div inside a fixed positioned div?

    How to override some CSS class settings

    css div and span display differently in browsers. How to unify?

    How do I put a border around a tr tag?

    How can I apply a vertical scrollbar to a div with a percentage height?

    How to get style of a div from javascript file

    CSS img align: how to set a img middle-right align in a DIV

    How to apply inverse text mask with CSS

    How to make background image go in the “background” using CSS/HTML

    How to have a hidable paragraph in an HTML email template

    How to overlay an image inside an image with HTML, CSS

    how to achieve following using css ( digits input )

    How to make an overlay using css hover on another element and pseudo class ::before

    How to update CSS to values that were chosen in a form? (jQuery)

    How to minimize the number of CSS classes created?

    How to Identify which div in a sequence with the same class was clicked

    How to position an absolute div next to an element in a scrollable section, but outside the section

    How to use ASP.NET DropDownList in Bootstrap navbar

    How can I apply a font type to everything using css

    How to use padding and lengthen bootstrap search bar?

    How to highlight a row of my table