Make a bold first impression.
Billboard
970 × 250A broad, substantial canvas for a short headline, one visual idea, and a clearly signposted destination.
Exact 970 px wide × 250 px high, including the border. No resizing. Scroll the preview when needed.
Two formats. One exact canvas.
Use the CSS and Animated GIF buttons above to compare the same original creative. The CSS container is exactly 970 × 250 CSS pixels; the GIF’s encoded canvas is exactly 970 × 250 image pixels. The 2-pixel creative border is inside those dimensions, not added to them. The previews never shrink to fit a smaller column.
Both versions show three scenes, two seconds per scene, repeated three times. The GIF contains nine encoded frames and no infinite-loop extension; it plays for 18 seconds and ends on the third scene. Play restarts the selected example; Stop shows its final frame. Reduced-motion preferences use a still preview.
Download editable HTML + CSS source · Download the CSS stylesheet · Download the animated GIF
View the complete 970 × 250 HTML + CSS source
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="robots" content="noindex,follow"><meta name="ad.size" content="width=970,height=250"><title>ClickToll 970 × 250 CSS banner example</title><style>
/* ClickToll original creative. Dimensions are the OUTER border box, in CSS pixels. */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;width:970px;height:250px;background:#fff9ed}
.ct-creative{position:relative;display:block;width:970px;min-width:970px;max-width:970px;height:250px;min-height:250px;max-height:250px;overflow:hidden;isolation:isolate;border:2px solid #17131f;color:#17131f;text-decoration:none;font-family:Arial,Helvetica,sans-serif;line-height:1;contain:layout paint}
.ct-creative:focus-visible{outline:3px solid #17131f;outline-offset:-5px}
.ct-scene{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:18px 18px 23px;overflow:hidden;background:#b9ff00;opacity:0;animation-duration:6s;animation-timing-function:steps(1,end);animation-iteration-count:3;animation-fill-mode:both}
.ct-scene:nth-child(1){animation-name:ct-first}
.ct-scene:nth-child(2){animation-name:ct-second}
.ct-scene:nth-child(3){animation-name:ct-third}
.ct-lime{background:#b9ff00}.ct-pink{background:#ff2e9a}.ct-cyan{background:#00e5ff}.ct-yellow{background:#ffd21f}
.ct-brand{position:relative;z-index:2;display:block;font-size:13px;font-weight:900;letter-spacing:-.5px;white-space:nowrap}
.ct-copy{position:relative;z-index:2;display:block;font-family:'Arial Black',Arial,Helvetica,sans-serif;font-weight:900;font-size:43px;line-height:.98;letter-spacing:-2px;text-transform:uppercase;white-space:pre-line}
.ct-bottom{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:2px solid #17131f;padding-top:10px}
.ct-caption{font-size:10px;font-weight:700;line-height:1.3;max-width:132px}
.ct-cta{display:block;flex-shrink:0;padding:9px 12px;background:#fff9ed;border:2px solid #17131f;box-shadow:3px 3px 0 #17131f;font-size:11px;font-weight:900;white-space:nowrap}
.ct-rainbow{position:absolute;bottom:0;left:0;right:0;height:7px;border-top:2px solid #17131f;background:linear-gradient(90deg,#ff2e9a 0 20%,#ffd21f 20% 40%,#b9ff00 40% 60%,#00e5ff 60% 80%,#8253eb 80%)}
.ct-art{position:absolute;right:-21px;top:-29px;width:118px;height:118px;border:15px solid #17131f;border-radius:50%;opacity:.12;pointer-events:none}
.ct-art::after{content:'';position:absolute;inset:9px;border:9px solid #17131f;border-radius:50%}
@keyframes ct-first{0%,33.332%{opacity:1}33.333%,100%{opacity:0}}
@keyframes ct-second{0%,33.332%{opacity:0}33.333%,66.665%{opacity:1}66.666%,100%{opacity:0}}
@keyframes ct-third{0%,66.665%{opacity:0}66.666%,100%{opacity:1}}
html[data-paused] .ct-scene{animation-play-state:paused}
html[data-frame] .ct-scene{animation:none!important;opacity:0!important}
html[data-frame="0"] .ct-scene:nth-child(1),html[data-frame="1"] .ct-scene:nth-child(2),html[data-frame="2"] .ct-scene:nth-child(3){opacity:1!important}
@media(prefers-reduced-motion:reduce){.ct-scene{animation:none!important;opacity:0}.ct-scene:nth-child(3){opacity:1}}
.ct-scene{padding:26px 31px 31px}.ct-brand{font-size:20px}.ct-copy{font-size:53px;line-height:.98;letter-spacing:-2px;max-width:690px}.ct-bottom{position:absolute;right:32px;bottom:32px;display:flex;flex-direction:column;align-items:flex-start;border:0;gap:12px}.ct-caption{max-width:158px;font-size:13px}.ct-cta{font-size:15px;padding:15px 22px}.ct-art{width:200px;height:200px;top:-77px;right:26px;border-width:24px;opacity:.17}.ct-rainbow{height:10px}
</style></head><body><a class="ct-creative" href="https://clicktoll.com/display-advertising/" target="_top" aria-label="Explore the ClickToll display advertising guide"><span class="ct-scene ct-pink" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">GOOD ADS.
GREAT IDEAS.</strong><span class="ct-bottom"><span class="ct-caption">One idea. One next step.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span><span class="ct-scene ct-yellow" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">MORE FOCUS.
LESS CLUTTER.</strong><span class="ct-bottom"><span class="ct-caption">Keep the promise clear.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span><span class="ct-scene ct-cyan" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">MAKE SPACE
FOR YOUR IDEA.</strong><span class="ct-bottom"><span class="ct-caption">Ideas for better banners.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span></a><script>
/* Playback controls affect CSS keyframes; no image or animation framework is required. */
(()=>{'use strict';const root=document.documentElement;
const preview=new URLSearchParams(location.search).has('preview');
if(preview){root.setAttribute('data-paused','');root.setAttribute('data-frame','0');}
window.addEventListener('message',event=>{
if(event.source!==parent||event.origin!==location.origin||!event.data||event.data.type!=='clicktoll-banner')return;
const action=event.data.action;
if(action==='play'){
root.setAttribute('data-frame','0');void document.body.offsetWidth;
root.removeAttribute('data-frame');root.removeAttribute('data-paused');
}else if(action==='stop'){
root.setAttribute('data-paused','');root.setAttribute('data-frame','2');
}else if(action==='reset'){
root.setAttribute('data-paused','');root.setAttribute('data-frame','0');
}
});})();
</script></body></html>View the exact-size animated GIF embed
<a href="https://clicktoll.com/display-advertising/">
<img src="https://clicktoll.com/assets/banners/970x250/clicktoll-970x250-animated.gif"
width="970" height="250"
style="display:block;width:970px;height:250px;min-width:970px;max-width:none;flex:none;border:0"
alt="Explore the ClickToll display advertising guide">
</a>Where this canvas fits
A large desktop placement with sufficient width and an explicit publisher or platform specification for this format. Treat the placement specification as the source of truth; a familiar format name does not guarantee availability in every campaign or market.
A useful way to compose the message
Use a confident split composition: a concise headline on one side and useful product or editorial imagery on the other. Preserve a clear action. Sketch the recognition cue, the useful promise, and the action before adding decorative detail. Review the composition at the intended size, not only enlarged inside a design tool.
The mistake to avoid
Building several competing panels just because the format is large. The audience still needs one obvious idea to understand. A clear, narrow promise is easier to carry from the banner to its destination. Check that the action label accurately describes the page or resource the visitor will encounter.
What the blank canvas includes
The download is a simple SVG at exactly 970 × 250 pixels, with a visible frame and editable text labels. Open it in a compatible vector editor as a planning canvas. Replace the labels with your approved creative, then export or package the final artwork to the recipient’s requirements.
Before you deliver
Check the actual output dimensions, file weight, supported format, destination, language, creative version, and any animation or click-handling rules. A browser preview is not a substitute for the receiving platform’s approval process. The ad specifications page explains the difference between a static image and an HTML creative package.
Compare a related shape
See the 728 × 90 format to compare the proportions. Keep the underlying offer consistent while deliberately rebuilding line breaks, spacing, and visual hierarchy for the new canvas.