Full width header image - Post ID 242093

User 495282 Photo


Registered User
132 posts

I am working on a design concept now where I would like to use a full screen width image as a header. The actual dimensions of the "usable" portion of the site would be around 1000 pixels, but I would like the image to extend 100% across the page and use approximately 50% of the height. I have been researching ideas for most of the day and haven't been able to come up with a viable solution. In most cases the image distorts beyond usability. Any suggestions on how I might achieve this look. An example can be found at thetaverngrill.com. Just to be clear, I am using VSD Version 7.0 Build 26. Thanks in advance for any suggestions.
Booth Kates

Patience...Persistence...Practice

http://www.boothkates.com
http://www.susiekatesdesigns.com
http://www./paradisecovemarinahs.com
http://www.thehillsab.com

User 187934 Photo


Senior Advisor
20,181 posts

When using an image for a header background you probably want to set a max-width since the height is fixed so the image doesn't end up stretching beyond it's original dimensions. This would not apply if the image can be repeated to fill the with.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.