CODEWITHSUNDEEP
javascriptcsshtmlbackground-image
user4981235
user4981235

Reputation:

why is it not possible to view background-image in some sites

If you go to a site like this one here and try to view background-image with browser, it is not possible.

How is that made possible? I would like to implement that in my site. Give like a css or js script that makes that happen. Thanks.

EDIT:

please do not talk of this way:

#selector{
background : url('http://someurl.com') no-repeat;   
}

because I tried it and it does not do the trick.

Upvotes: 0

Views: 68

Answers (1)

Skatox
Skatox

Reputation: 4284

In this case, the background image is not a CSS background, it's just an image setted to expand the whole page and sent to the background with a z-index.

HTML of the image:

<div id="bg-top" class="bg-top">
  <div>
    <img src="http://netstorage.metrolyrics.com/artists/hero/default/9.jpg" alt="Westlife lyrics">
  </div>
</div>

CSS to expand the image and send it to the background:

.bg-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 584px;
    background: #000;
    border-bottom: 1px solid #000;
    overflow: hidden;
    z-index: -2; // This is the key, it makes it to be at the background
}

Upvotes: 3

Related Questions