What is the ideal size for a banner on a website please? In particular, the width?
Hi. Depends on the position on the page. It can be 320px as much as 100%.
It would be at the very top of the page, the main banner.
In general, you could then provide 2-3 banners: 540px (for small screens up to 576px), 960px (for medium screens up to 992px), 1140px (for large screens up to 1200px).
You can also provide other sizes: 720px (for max 768px), 1440px (for max 1500), 1860px (over 1500px).
Using the picture tag or img, you can then have a different picture (also in height) depending on the size of the screen.
The dimensions shown are just an example; some of them take advantage of the Bootstrap grid. I suggest experimenting with the final result on the various devices and possibly making improvements.
Thanks David, 6 images in total then.
Or use a single image sized to the larger end of the scale, styled as “width:100%” (or 90%, or whatever you like) that would address all window sizes. That’s the direction I’d lean if we’re just talking about your standard banner across the top of the page.
Thank you tracknut, do you use similar on your website? If so, could you post a link please, just so I can see it in action.
I don’t have a site that specifically uses that model, but here’s a quick page - http://www.frenchbanknotes.com/test-banner.html
Thank you, that seems to work great.
I know it’s a newb question, but how do I view the css file for that please?
If you view the page source, you’ll find this:
<!DOCTYPE HTML>
<html>
<head>
<title>My Page</title>
<style>
.banner {width:100%}
</style>
</head>
<body>
<img class="banner" src="Boggs-FUN95-a.jpg">
</body>
</html>
Yep, I did see that before, I suppose I was looking for something with more than one css command.
Not everything needs to be complicated to work.
I like the size of 300x250 and 728x90.
Why do you recommend those specific sizes, @kittysoman2013?