TechQA.

Linked Questions

Popular Questions

CSS to make background image stay in place even with different browser size

Asked by At

I have a CSS background image, but when I resize by browser to go bigger the image moves to the left. How do I keep the image in the same place even when the browser resizes? My code (so far) is:

.home-top {
    width: 100%;
    background-image: url('../assets/images/home-2x.png');
    background-repeat: no-repeat;
    background-position: -75px -600px;
    margin-bottom: 50px;
}

Any idea's?

html css
Original Q&A

1 Answers

1
jonathana On

I had this issue in the past,
here is an example from my project - LIVE DEMO
drag the editor splitter and watch the reaction of the output.

The trick is in the css:

  .general /* the beckground image class */
  {
    background-image: url('https://clipground.com/images/business-people-handshake-clipart-18.png');
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center top;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    opacity: 0.95;
    -webkit-backface-visibility: hidden;
    -webkit-background-size: cover !important;
    z-index: -1;
    -webkit-transform: translate3d(0, 0);
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }

Related Questions