Member Avatar for pakunoda

Hello to all!

Can you please help me with my simple problem regarding to my image logo.

i used div tag to my logo in order for me to position it in top left side of my web page.
i thought everything's fine but when i try to minimized the web browser (chrome, firefox, E.I) the location of my logo was now at the wrong place..

Can somebody help me with my problem? this is all what ive'd done in css. .

#logo
{
    width:250px;
    height:154px;
    background-image:url(img/logo.png);
    float:left;
    margin-left:10em;
    background-attachment:fixed;



}

Thanks in advance to all of you guys.

sorry for my grammar. im not good in english.

Edited by mike_2000_17 because: Fixed formatting
  • 3 Contributors
  • 3 Replies
  • 107 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by Usernamex235

Dani AI

Generated

Quick summary: the behavior you describe usually comes from using a background that’s fixed to the viewport plus positioning that depends on font/flow (like large em margins or floats). is right to test removing the fixed background first, and is right to ask for the full markup if that doesn’t fix it.

Practical guidance — two safe approaches:

Use a real image for the logo (better for accessibility and predictable placement). Pin it to the top-left of the viewport when you want it to stay there while scrolling:

<div id="logo">
  <img src="img/logo.png" alt="Site logo">
</div>

#logo {
  position: fixed; /* keeps logo at same viewport spot */
  top: 12px;
  left: 12px;
  z-index: 999;
}
#logo img {
  display: block;
  max-width: 100%;
  height: auto;
}

If you prefer a background-image on the container, avoid background-attachment: fixed (it ties the image to the viewport and can look misaligned when the element moves). Instead, position the container explicitly and use background-position and background-repeat: no-repeat.

Quick troubleshooting checklist:

  • Remove background-attachment: fixed and test.
  • Replace large em margins with explicit left/top offsets or use container padding so changes in font-size/zoom don’t shift layout.
  • Use browser devtools to inspect computed position, top/left, and parent widths while resizing.
  • Remember background-attachment: fixed has inconsistent behavior on mobile; using an <img> is more reliable.

For reference on behavior and best practice, see the CSS docs for background-attachment and position and the HTML img element on MDN:

Recommended Answers

All 3 Replies

Member Avatar for Usernamex235

Try getting rid of the line:

background-attachment:fixed;

Member Avatar for kidwon

The problem isn't just in the css of your logo!
Put both of all your HTML and CSS or even better a link to your webpage if Rade's solution doesn't help.

Edited by kidwon because: n/a
Member Avatar for Usernamex235

^^ 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.