Whenever I scroll up in my static page project, the background color is always white, regardless about what my "body," "html," or "root" background colors are. For example, I have a dark background right now on my website, and when users scroll past the boundaries of the site, I would like for them to see that same color instead of white.
#Background color when scrolling is always white
river apex
nocturne tendon
Could you please provide some source code, even just a few snippets (the HTML markup and some CSS), to help me better understand the case?
pseudo forge
That shouldn't happen if you've set the background on your body tag... if you set it on some other container (say a main div or something) then yes it can happen but the body should solve it.
river apex
I am working with React. Here is my CSS: #root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
box-sizing: border-box;
}
body {
background-color: #23252C;
color: white;
}
.card {
display: flex;
flex-direction: column;
gap: 1rem;
background-color: #1A1B21;
border-radius: 0.625rem;
max-width: 20rem;
}
.info {
display: flex;
flex-direction: column;
gap: 1rem;
}
.info-img {
width: 100%;
border-radius: 0.625rem 0.625rem 0 0;
}
footer {
display: flex;
justify-content: center;
gap: 1rem;
padding: 1rem 0rem;
background-color: #161619;
border-radius: 0 0 0.625rem 0.625rem;
}
Here is my Info Component: export default function Info() {
return (
<div className="info">
<img src="/public/edited.JPEG" alt="alt text" className="info-img"/>
<div className="titles">
<h1>My name</h1>
<p className="position">Frontend Developer</p>
</div>
<p className="website">website</p>
<div className="info-buttons">
<button>
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
<path d=""/>
<path d=""/>
</svg>
<p>Email</p>
</button>
<button className="linkedin">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="" fill="white"/>
</svg>
<p>LinkedIn</p>
</button>
</div>
</div>
)
}
