CODEWITHSUNDEEP
htmlcssimagebackground
Red One
Red One

Reputation: 101

Background-repeat Not Working With Div tag

Link to jsfiddle. For some reason, the picture at the top left will not scroll down with the page. However, it looks like one is behind the second one I put in.

What I'm trying to do in my program is keep that picture that the top left even after setting the border and margin to 0px, but also scroll down.

I've seen a few different ways of writing this, but it doesn't seem to work for me.

HTML:

<div class="home" style="position: absolute;">
  <a href="hub.html">
   <!--<img src="https://puu.sh/vyv4h/c23b05c784.png">-->
   </a>
</div>

CSS:

.home {
  top: 0px;
  left: 0px;

  background-image: url('https://puu.sh/vyv4h/c23b05c784.png');
  background-repeat: no-repeat;
  background-attachment: fixed;

  position: absolute;
  z-index: 10;
}

Anyone know how my syntax is wrong?

EDIT: I will say though that this syntax does work. Problem is that I cannot get it to work with how my code is currently.

body  {
    background-image: url('https://puu.sh/vyv4h/c23b05c784.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
}

EDIT2: Sorry for the constant edits. I've also tried this:

HTML

<img id="home" src="images/home_iconv2.png">

CSS:

#home {
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Upvotes: 0

Views: 3565

Answers (3)

Zachary Dahan
Zachary Dahan

Reputation: 1499

If you want the image to float over the content, you should use position: fixed attribute instead of position: absolute you've setted both in HTML ...

<div class="home" style="position: absolute;"> // <- Here
    <a href="hub.html">
   <img src="https://puu.sh/vyv4h/c23b05c784.png"></a>
</div>

And in the CSS 

.home {
    top: 0px;
    left: 0px;
    [...]   
    position: absolute; // <- Here
    z-index: 10;
}

My advice would be avoiding writting inline CSS (like you did on the HTML file.) ;)

Upvotes: 1

Sun Geng
Sun Geng

Reputation: 21

<div style="position:fixed">
    //have a try
</div>

Upvotes: 1

Toby
Toby

Reputation: 13385

Try putting the background on body:

https://jsfiddle.net/6xj4fjny/

body {
  background-image: url('https://puu.sh/vyv4h/c23b05c784.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
}

Upvotes: 1

Related Questions