Member Avatar for vitaquous

Hi

I am trying to create a background I like the way Maxthon built theirs it is simple and yet attractive. How did they do this? I am also using the 960 grid system, I have tried to create an image but the image messes up on the bottom by repeating if the text goes beyond the bottom of the screen. I have tried to make the image norepeat but then the text moves while the image stays stationary. I have tried to use gradients but this also causes the gradient to repeat. I have tried to use three different div tags each with a different background color but they do not span the entire screen width even if I set width at 100%.

How did Maxthon do their background?

Thanks

  • 1 Contributor
  • 1 Reply
  • 212 Views
  • 38 Minutes Discussion Span
  • Latest Post Latest Post by vitaquous

Dani AI

Generated

A simple, robust way to get the “Maxthon” look is to think in layers: a full‑width gradient for the color wash, plus a tiny repeating texture (noise) or subtle pattern on top for depth. Gradients in CSS are treated like images and scale to the element they’re applied to (they won’t tile unless you use a repeating gradient). As discovered, a gradient editor is great for picking stops — the key is how you apply the CSS. (developer.mozilla.org)

If your image tiles at the bottom when the page gets taller, you’re likely using a small bitmap with default repeating or you accidentally used background-attachment: fixed. background-repeat: no-repeat prevents tiling; background-attachment: fixed pins the background to the viewport so the page content scrolls over it (that’s why “the text moves while the image stays stationary”). Use background-size: cover to scale a single image to fill the viewport, or omit fixed if you want the background to scroll. Example (basic gradient, scroll with content): 

html, body { height: 100%; margin: 0; }

body {
  background-color: #e6eef8; /* fallback */
  background-image: linear-gradient(to bottom, #f7fbfe 0%, #d3e5f5 100%);
  background-repeat: no-repeat;
  background-attachment: scroll; /* will move with page */
}

(developer.mozilla.org)

To combine a gradient + texture use multiple backgrounds (first listed is on top) and control sizes for each layer. This keeps the main gradient non‑repeating and the tiny noise tiled for subtle grain:

body {
  background-image:
    linear-gradient(to bottom, rgba(255,255,255,0.6), rgba(0,0,0,0.06)),
    url('/images/noise-16.png');
  background-size: cover, 16px 16px;
  background-position: center top, 0 0;
  background-repeat: no-repeat, repeat;
}

Order and background-size matter. (css-tricks.com)

If your three colored divs won’t span full width inside a 960 wrapper, move the full‑width background to the html/body or use a full‑bleed fixed layer behind the centered 960px container (a position:fixed / z-index:-1 element works well). Note: background-attachment: fixed can behave poorly on some mobile browsers — a fixed background layer (or JS/polyfill) is a safer cross‑device approach. Also remember to reset default margins (html,body{margin:0}) when centering a fixed background. (w3.org)

Member Avatar for vitaquous

OK never mind, seems after all the searching on google, I finally found the correct way to search. CSS Gradient Generator. Sorry I never thought to search for this until after I posted this query.

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.