2

I’m currently creating my first website and I am nearing completion. I am using a background image for the main body under the header. I am finding an issue with each of my pages cause they are all different in height making the current settings I have for my background image enlarge the picture to fit the full page. What I am trying to do is have a background image set “sticky”. My idea is that the background image would be directly under the header and when scrolling downwards the image would eventually reach top of screen then stay fixed. I think this way I could set the picture to the fit the screen size only and not the entire page.

Any suggestions?

Wall-E
  • 21
  • 1
  • 2

2 Answers2

1

You can set different propreties to a background in CSS.

background-clip     Specifies the painting area of the background
background-image    Specifies one or more background images for an element
background-origin   Specifies where the background image(s) is/are positioned
background-size     Specifies the size of the background image(s)

The following code will make your background fixed :

background: url('picture.jpg') no-repeat fixed;

To make the 'sticky' effect, check the CSS position documentation.

An element with

position: sticky;

is positioned based on the user's scroll position.

Internet Explorer, Edge 15 and earlier versions do not support sticky positioning. Safari requires a -webkit- prefix. You must also specify at least one of top, right, bottom or left for sticky positioning to work.

YVND
  • 359
  • 3
  • 15
0

I know this answer a bit late but it might come in handy for future reference
Try using Sticky background

here's the sample code:

html,
body {
  margin: 0;
  width: 100%;
  max-height: 100%;
  max-width: 100%;
}

#header {
  height: 100px;
  width: 100%;
  background: black;
}

#rest {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  background: blue;
}

#content {
  width: 50%;
  z-index: 0;
  grid-row: 1;
  grid-column: 1;
  margin: 0 auto;
  background: yellow;
}

#sticky_back {
  width: 100%;
  height: 100vh;

  grid-row: 1;
  grid-column: 1;
  position: sticky;
  top: 0;
  background-image: url("https://images.pexels.com/photos/1591447/pexels-photo-1591447.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
  background-repeat: no-repeat;
  background-size: cover;
}
<div id="header"></div>
  <div id="rest">
    <div id="sticky_back"></div>
    <div id="content">
      <span>
        psum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim vennostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut laborere magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut alnostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut laborere magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut alnostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim e et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut laborere magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitatio
      </span>
    </div>
  </div>
cak3_lover
  • 1,440
  • 5
  • 26