Member Avatar for sevdiaz

Hello all,

I'm new in here and i want learn something, CSS!.

Well i have some problem for css, i need to know how to make fixed image background, please see my attached file.

please help me for tag and css properties. i really need help. thanks

thanks all.

boog.bmp (832.01 KB)
  • 3 Contributors
  • 2 Replies
  • 120 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by MattEvans

Dani AI

Generated

Nice start — shows how to place the image and points toward keeping it fixed. A few practical notes and a more reliable technique that avoids cross‑browser mobile issues.

A more robust approach than relying on the background-attachment property is to add a full-screen, fixed element behind your page content. That gives consistent results across desktops and older mobile browsers, lets you use background-size: cover to fill the viewport, and keeps the HTML/body CSS simpler.

Example (place before your main content):

<!-- first child of <body> -->
<div class="site-bg" aria-hidden="true"></div>

.site-bg {
  position: fixed;
  inset: 0;
  background: url("/path/to/image.jpg") center/cover no-repeat;
  z-index: -1;
  pointer-events: none;
}

Troubleshooting and tips

  • If the background doesn't appear, check stacking context: position your background element as the first child of <body>, or give your content a higher stacking index (for example, position: relative; z-index: 1).
  • Disable or replace fixed backgrounds on small/touch devices for performance and smooth scrolling:
    @media (max-width: 768px) {
.site-bg { display: none; }
}
  • Optimize the image (size and format — WebP when possible), and use a version sized for typical viewport widths to reduce download cost.
  • For a parallax effect, avoid background-attachment: fixed and use a lightweight JS solution driven by requestAnimationFrame to avoid jank.

Compatibility references:

  • background-attachment details: MDN
  • background-size (cover): MDN
  • CSS Backgrounds spec: W3C

This approach gives you the fixed visual effect wanted while sidestepping many mobile/browser quirks that can make background-attachment unreliable.

Recommended Answers

All 2 Replies

Member Avatar for Fungus1487

Hello all,

I'm new in here and i want learn something, CSS!.

Well i have some problem for css, i need to know how to make fixed image background, please see my attached file.

please help me for tag and css properties. i really need help. thanks

thanks all.

<HEAD>
  <STYLE type="text/css">
    background-image: url('imageurl.jpg');
    background-repeat: no-repeat;
    background-position: 30% 20%;
  </STYLE>
</HEAD>

you can change the background-postion line to suit where you wish to have your image, or to specify an absolute position use "px" instead of "%"

Member Avatar for MattEvans

add a:

background-attachment: fixed

to your body tag's CSS rules; if you want the background to stay still wherever the user scrolls.

bear in mind, this might not work in all browsers,.. i can confirm it works in IE6 and Opera, but I seem to remember having trouble with it at some point..

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.