Member Avatar for azetect

is there any way i can make background same as this site ?

i need the web site background effect fit at all resolution without scrollbar at bottom.

thanks in advice .

  • 2 Contributors
  • 2 Replies
  • 123 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by azetect

Dani AI

Generated

As noted, the effect on that site is achieved by tiling a narrow vertical graphic horizontally. That approach works well, but the scrollbar at the bottom usually comes from layout issues rather than the background itself. Common culprits are the browser default body margin, an element wider than the viewport (fixed widths, images, or negative margins), or an image file that has stray pixels at its edges.

A solid baseline to avoid horizontal scrollbars is to reset box model and page margins, then use a scalable background so the visual fills without forcing overflow. Example options include a CSS gradient (no image file) or a single large image scaled with background-size. Both avoid tiling artifacts:

html, body {
  height: 100%;
  margin: 0;
}
* { box-sizing: border-box; }

body {
  background: linear-gradient(180deg,#2b6ea3,#9fc9ee) no-repeat center top fixed;
  background-size: cover;
}

For diagnosing what actually overflows, a quick devtools-assisted script finds offending elements, and a temporary outline helps visualize them:

[].forEach.call(document.querySelectorAll('*'), function(el){
  if (el.scrollWidth > document.documentElement.clientWidth) {
    console.log('overflowing:', el, el.scrollWidth);
  }
});

// temporary visual aid
// * { outline: 1px dashed rgba(255,0,0,0.2); }

Notes and cautions: avoid overflow-x: hidden as a permanent fix because it can mask real layout bugs; use media queries or max-width: 100% on content and images for smaller screens; SVG backgrounds or CSS gradients remove tiling and file-edge issues; check exported background images for stray transparent columns or anti-aliasing that add pixels. This complements ’s tiling idea and gives extra steps to ensure the page never produces an unwanted horizontal scrollbar.

Recommended Answers

All 2 Replies

Member Avatar for almostbob

This type of site background is a vertical -narrow*LONG- image repeat-x
create the gradient fill you want or download it from a webmaster tools website
take a narrow (even 1pixel works) slice vertically

body {background:url('thispic.href') repeat-x; }

If you take a horizontal slice wider than screen size and repeat-y you get Horizontal scrollbars everybody will notice
If you take a vertical slice longer than screen size and repeat-x, you get vertical scrollbars, nobody will notice

If you have a small image of a repeating cell (like windows default wallpapers) you can repeat-x and y (repeat) and create a fullscreen

Edited by almostbob because: n/a
Member Avatar for azetect

this help me a lot and thanks sur for give me a detail reply.

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.