Question 338159 in Html Question posted in
Some basic documentation can be found here.

Html – I want the texts to be fixed with the background image when scrolling

I want the when scrolling the #home section to fixed to the background (including all the texts and buttons). It should be like there are texts in an image. The text is in the middle left of the page (keep it as default-no changes should be done).
**
All i want is the texts and the button (home__container) to be fixed at the same position and when scrolling it should go back and the other-section should come over it when scrolled**

<html>
<head>
    <link rel="stylesheet" href="style.css">
    <title>CHANEL Copy Website</title>
</head>
<body>
    <main>
        <section id="home" style="height: 90vh;">
            <div class="home__container">
                <h1>Timeless Elegance</h1>
                <h4>Shop Now</h4>
                <button>Explore</button>
                <button>Shop Collections</button>
            </div>
        </section>
        <section #other-section>
        </section>
    </main>
</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    --black: #161413;
    --white: #FFFFFF;
    --dark-gray: #444444;
    --light-gray: #E7E7E7;
}
body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    color: var(--black);
    background-color: var(--white);
    width: 100%;
}
section {
    padding: 24px 16px;
    display: flex;
    align-items: center;
    width: 100vw;
    max-width: 100%;
}

/* home */
#home {
    height: 90vh;
    align-items: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('assets/brand-home-bg-image.avif');
    color: var(--white);
    width: 100vw;
    max-width: 100%;
    background-attachment: fixed;
}
.home__container {
    margin-top: 2.5rem;
    margin-left: 1.5rem;
}
.home__container h2 {
    color: #f9f7f4;
}
.home__container button {
    margin-top: 1.5rem;
    margin-right: 1rem;
}

/* Other Section */
#other-section {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

I tried giving position fixed and z-index and also added javascript code using gpt, it did not work!

Tags:

3

Answers


  1. 0

    You can try setting the position to fixed for .home__container and set the z-index much higher to ensure you content is above other elements always.

    Sample code to add with your existing one

    .home__container{
     position: fixed;
     top: 50%
     transform: translateY(-50%)
     z-index: 999;
}

    top and transform are used to bring your content to the middle respective to the screen height.

    Login or Signup to reply.
  2. 0

    Have you tried setting the positions of the text to absolute position: absolute; and putting it inside a div with the image?

    <div>
  <img style="position: absolute;" src="your-image-src">
  <!-- text tags here with style="position: absolute;" like this -->
  <p style="position: absolute;">My text</p>
</div>
    Login or Signup to reply.
  3. 0

    Please try the code provided below. I believe it should meet your requirements.

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --black: #161413;
    --white: #FFFFFF;
    --dark-gray: #444444;
    --light-gray: #E7E7E7;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    color: var(--black);
    background-color: var(--white);
    width: 100%;
    margin: 0;
    padding: 0;
}

section {
    padding: 24px 16px;
    display: flex;
    align-items: center;
    width: 100vw;
    max-width: 100%;
}

/* home */
#home {
    height: 90vh;
    align-items: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('assets/brand-home-bg-image.avif');
    color: var(--white);
    width: 100vw;
    max-width: 100%;
    position: relative;
}

.home__container {
    position: fixed; /* Fix the position */
    margin-top: 2.5rem;
    margin-left: 1.5rem;
    z-index: 1; /* Ensure it's below the other sections */
}

/* Other Section */
#other-section {
    position: relative;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 2; /* Ensure it appears above the fixed section */
}
    <html>
<head>
    <link rel="stylesheet" href="style.css">
    <title>CHANEL Copy Website</title>
</head>
<body>
    <main>
        <section id="home" style="height: 90vh;">
            <div class="home__container">
                <h1>Timeless Elegance</h1>
                <h4>Shop Now</h4>
                <button>Explore</button>
                <button>Shop Collections</button>
            </div>
        </section>
        <section id="other-section">
        Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
        </section>
    </main>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search