Member Avatar for Muazam

I've seen a lot of sites like these;

http://www.kumby.com/
http://animetoplist.org/out/site/animepalm
http://www.gamesradar.com/uk
http://www.newgrounds.com/

They have static image/ ad BG.

How to I make a layout like that?

  • 5 Contributors
  • 5 Replies
  • 135 Views
  • 8 Months Discussion Span
  • Latest Post Latest Post by Veneficae

Dani AI

Generated

Common idea: those sites put a single decorative image behind the page (either on the body or on a full-screen element) and make it non-repeating, centered, and scaled so the important area stays visible. was on the right track, but the snippet in post #2 mixes values into background-image (that property only accepts a URL). Use the shorthand or separate properties so browsers parse it correctly.

A practical, cross-browser starting point:

body {
  background-color: #111; /* fallback while image loads */
  background-image: url('/images/bg.jpg');
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed; /* keeps image static as content scrolls */
  background-size: cover; /* scales image to fill viewport preserving aspect */
}

Addressing resolution and layout (builds on ): use background-size: cover so the image fills most viewports, but also prepare multiple sizes and swap them with media queries so small devices download smaller files:

body { background-image: url('/images/bg-small.jpg'); }

@media (min-width: 1200px) {
  body { background-image: url('/images/bg-large.jpg'); }
}

If you want different backgrounds per page (answering ), add a server-side class on body and define per-class images:

<body class="about"> ... 

body.about { background-image: url('/images/about-bg.jpg'); }

Troubleshooting and tips: older mobile Safari often ignores background-attachment: fixed; if that matters, place a fixed-position element behind content (position: fixed; top:0; left:0; right:0; bottom:0; z-index:-1;) and give it the background. Compress images, serve WebP/AVIF where possible, and test focal point visibility (use background-position or crop alternatives). For official details see MDN on background-size and background-attachment.

Recommended Answers

All 5 Replies

Member Avatar for Veneficae

Place the following code within style tags, within the header of the page.

body {
background-image: url(imagepath/filename.jpg) no-repeat top center fixed;
}

So on your page, it'll look something like this:

<style type="text/css">
body {
background-image: url(imagepath/filename.jpg) no-repeat top center fixed;
}
</style>
</head>
Edited by Veneficae because: n/a
Member Avatar for MJ Pieterse

also make sure that the picture you use as your background picture fits well in all screen resolutions. so when you have a screen of 800 x 600 you still get the main idea of the background and when you view it in higher resolutions that the image does not cut off.

Member Avatar for BelgianQueen

How do I accomplish the total opposite? To have a non-static image in the background? In other words to be able to have different pictures in the background through the site. I can't figure this out grrrrrrrr:confused:

Edited by BelgianQueen because: n/a
Member Avatar for Veneficae

Do you mean that you want images changing every so often on a page, or so each page has a different background? If you want a different image as a background on each page all you need to do is have the images, and apply the code I put in my earlier post in each page, and change what image it links to in that code. If you wanted images changing in the one page every so often, well... that would require jQuery, and I'd advise against that to keep user's familiarity with pages - if the background images always change to something different there's one less element to associate the page from another.

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.