Jamming React Project: Background Image Enlarges Every Time I Add a Song To Playlist

I am not sure where this bug is coming from… My app doesn’t throw any errors in the console, and as far as my eyes are seeing I have input the correct code.

The app seems to be functioning correctly other than the odd zooming bug. When I search for an artist/song, the results area is populated with a list of songs. When I click the + next to a song name, the background image zooms in a little and stays that way. When I add another song, it zooms in a little more, etc. etc. It will keep zooming every time I add a song, until I reload the page.

Since I don’t know where the bug is coming from, I don’t know what code to add here in a code snippet. I am going to add a link to my project folder on gitHub, but if you suspect that you know where the error might be, please let me know and I will add a code snippet from that component(s).

My Jamming Project Folder

Thanks in advance! This isn’t an app breaking bug, but it is really annoying. I am just learning React, and I have spent HOURS at this point trying to debug this issue and cannot figure it out.

I cannot replicate the zooming of the background image on my machine using your code. I am testing a mac - safari browser and also a chrome browser…could you possibly have some accessibility feature that is interfering?

Possibly. I will look into that when I get back to my computer. Ill also get a screen recording of the bug and post it.

Apparently it only happens if the screen is too small for the track list and playlist components to fit next to each other (see screen recording). I tested it full screen, and with the screen just big enough to fit both components, and the zoom effect was not happening.

Ahhhh! The issue is related to the following css

.App {
  height: 100%;
  padding: 0 17% 10% 17%;
  background-image: url("./background_photo_desktop.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  font-family: "Work Sans", sans-serif;
  font-weight: 500;
  color: #fff;
}

This code stretches the background to find the size of the page. Every time you add a song in the small width screen size, the song adds length to the page. This forces the background image to stretch to fill the new space.

To fix this you could try something like adding a div just to hold the background image that is at the same level as your main container on the screen.

render() {
    return (
      <>
        <div className="background"></div>
        <div>
          <h1>
            Ja<span className="highlight">mmm</span>ing
          </h1>

          <div className="App">
            <SearchBar onSearch={this.search} />
            <div className="App-playlist">
              <SearchResults
                searchResults={this.state.searchResults}
                onAdd={this.addTrack}
              />
              <Playlist
                playlistName={this.state.playlistName}
                playlistTracks={this.state.playlistTracks}
                onRemove={this.removeTrack}
                onNameChange={this.updatePlaylistName}
                onSave={this.savePlaylist}
              />
            </div>
          </div>
        </div>
      </>
    );

The CSS for that div would look something like this:

.background {
  position: fixed;
  height: 100%;
  width: 100%;
  background-image: url("./background_photo_desktop.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
}
1 Like

@1moregame I love coding so much! Thank you for that detailed solution. It works. As frustrating as it can be to come across a bug that I struggle with, it is so satisfying to implement a working solution, whether that solution comes from my mind or someone elses. I enjoy coding more and more every day!

1 Like