Overlapping Header Images for Narrow Browser Windows

The Header Images

The header consists of 2 images, one is used as the background that is fixed in the right position and does not repeat. The background color is black. The other image is the logo and is set in the left side with conventional HTML - valid HTML for this doctype. The problem is having great header graphics that self-adjust to fit most browser window sizes.

The CSS

The CSS is simple. It sets up the background image and color for the DIV element that contains it and the logo image. Below is the CSS used in this example.

#header {
     background: #000 url(https://enterprisejm.com/images/right-header-image.png) top right no-repeat;
     width: 100%;
     text-align: left;
     padding: 0;
     margin: 0;
}

The HTML

The HTML for this example will not be exactly like the HTML in a vBulletin header. I have used a single DIV element to contain the logo and its companion background. Below is the code.

<div id="header"><img src="https://enterprisejm.com/images/left-header-image.png" alt=logo" title="left-aligned logo image" /></div>

You can learn more about backgrounds on a web page by visiting W3Schools.




This sample file was developed May 2009. It's now considered old technology, but I am keeping it on my site for old-times' sake. Blast from the past sorta thing. I gave up hand-coding websites a year or so after this project. I now primarily use WordPress and a little customization to develop websites now - and usually only for personal use or for those I am close to. This web page was last edited January 12, 2019. Take a look at some of my photography and you might forgive me for this old crap.

OR... head back to this site's Home Page