How can I do a large header that fit on every screen resolution

e.bouliane wrote on 2/20/2014, 8:29 AM

I try to make a large header (1920px and more)  for one of my client. All the new web site have a large header/banner with the normal page in the center of this banner. And on those new sites you can open it on every king of resolution screens and the page always stay in the middle. I try with different way like put a picture on the background but it doesn't work, The background always make a tile with the picture and it's not what I want. I want a large header with pictures and slide show, see the site that I join to see what I mean. http://www.marinegb.com/

p.s. sorry if my english writing is not good, I'm a french guy  :-)

I use Web designer MX Premium, last version, I make my updated last month

My Computer is a windows7, 64 bit and my screens resolution are: screen#1 - 1920x1080P, screen #2 - 1280x720, and my iPad

Comments

johnebaker wrote on 2/20/2014, 2:27 PM

Hi

I do not know if you can do this within Web Designer (I do not use this) however the effect is achieved by creating a DIV element and styling/positioning it using CSS.

I would suggest you look here for more information on how to use these if you are not familiar with HTML

HTML tag you require is   DIV

CSS elements you require are:

      background image 

      z-index

      width, height

      top

      border

      position:absolute

      margin

The current trend is to make the main content of the website a fixed width as in the example you gave - this is achieved by putting the content inside a DIV of fixed width and centred on the page.

HTH

John

.

 

Last changed by johnebaker on 2/20/2014, 2:33 PM, changed a total of 4 times.

VPX 16, Movie Studio 2025, and earlier versions 2015 and 2016, Music Maker Premium 2024.

PC - running Windows 11 23H2 Professional on Intel i7-8700K 3.2 GHz, 16GB RAM, RTX 2060 6GB 192-bit GDDR6, 1 x 1Tb Sabrent NVME SSD (OS and programs), 2 x 4TB (Data) internal HDD + 1TB internal SSD (Work disc), + 6 ext backup HDDs.

Laptop - Lenovo Legion 5i Phantom - running Windows 11 23H2 on Intel Core i7-10750H, 16GB DDR4-SDRAM, 512GB SSD, 43.9 cm screen Full HD 1920 x 1080, Intel UHD 630 iGPU and NVIDIA GeForce RTX 2060 (6GB GDDR6)

Sony FDR-AX53e Video camera, DJI Osmo Action 3 and Sony HDR-AS30V Sports cams.

e.bouliane wrote on 2/20/2014, 4:58 PM

Thank you John, I appreciated the link you gave me, I have a small base in HTML, but it's a long time that I take my course, and it was HTML3 or 4 don't remember ... But these king of header was not realy popular 4 or 5 years from now ...

But I will keep that link, realy good reference ...

Thanks again ...