Member Avatar for dlannetts

hi, so, i want to put an image as my background right where the header is, so i am guessing this will be a vector? Now, i have built plenty of site, but usually i don't include many images, its usually just css for me, my main concern of this is when you re-size the browser or have a different size browser you get them horrible scroll bars, up and down is fine, left and right i don't like, is there anyway around this or have i had a bad introduction to images in sites?

  • 2 Contributors
  • 2 Replies
  • 86 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by dlannetts

Dani AI

Generated

Brief, practical follow-ups to the thread for and thanks to for the placement point. Two common, reliable approaches let a header image scale without causing horizontal scroll: use a responsive CSS background that crops nicely, or use a responsive <img> with modern srcset/sizes so the browser picks the right file for the device.

Example: CSS-background (keeps image responsive and centered)

.header {
  background-image: url("header.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  min-height: 180px;
}

Example: responsive image element (good when the header is photographic and you want browser-driven selection)

<header class="site-header">
  <img src="header-800.jpg"
       srcset="header-400.jpg 400w, header-800.jpg 800w, header-1600.jpg 1600w"
       sizes="100vw"
       alt="Site header image">
</header>

.site-header { height: 200px; overflow: hidden; }
.site-header img { width: 100%; height: 100%; object-fit: cover; display: block; }

Troubleshooting and best practices: keep container widths fluid (avoid hard-coded pixel widths), set max-width: 100% on images, and use the DevTools device emulator to test breakpoints. Avoid overflow-x: hidden as a permanent fix; track down the overflowing element (often margins, fixed-width elements, or unscaled images). For logos or simple artwork, use SVG for crisp scaling and small file size. Also optimize file format/size (WebP/appropriate JPEG compression) so large headers do not slow the page.

Recommended Answers

All 2 Replies

Member Avatar for guyinpv

Browsers don't show scroll bars for background images, only the block level objects. If you use an <img> or a table it might show scroll bars. But using background image it shouldn't.
If you put the background on <body> you should be fine. If you put the background in a <div>, you'll have to set a height/width on the div or it'll shrink to nothing because background images don't stretch their containers.

No harm in trying it, pretty simple to test! Good luck

Member Avatar for dlannetts

Browsers don't show scroll bars for background images, only the block level objects. If you use an <img> or a table it might show scroll bars. But using background image it shouldn't.
If you put the background on <body> you should be fine. If you put the background in a <div>, you'll have to set a height/width on the div or it'll shrink to nothing because background images don't stretch their containers.

No harm in trying it, pretty simple to test! Good luck

Ahh, right, i must have tried it wrongly once and had bad impressions about it, thank you for this : )

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.