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

Html – Responsive scrollable background

I’m very beginner with HTML/CSS
I want to create my portfolio, first I try to add the simplest elements and first, I need my all background. My main page is a big scrollable page so I want my BG fit to my navigator’s screen size, but I want to have the entire image’s height when I can scroll on.
Actually my BG div is not responsive, when I reduce my navigator’s window, the image’s width is cropped instead of be resized. Do you have any tutorial to make a good background please ?
And I really need my entire background height because I use my image for reference for my other elements on my page, so I can’t build my page within my BG.

And maybe because my BG div is wrong, I can’t center any other div on my background div…

This is my HTML :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Soyfki - Portfolio</title>
  <link rel="stylesheet" href="main.css">
</head>
<body>
    

  <div class="bg">
    <div class="test">
        Hello World
    </div>
    
  </div>


  <script src="app.js"></script>
  <noscript>You need to enable JavaScript to view the full site.</noscript>
</body>
</html>

And this is my CSS :

* { 
    margin: 0; /* This is for setting the global margin to 0 */
    padding: 0; /* This is for setting the global padding to 0 */
    box-sizing: border-box; /* I can’t exactly explain this but read this: https://www.w3schools.com/css/css3_box-sizing.asp */
    } 


body { }


.bg {
    position: relative;
    width: 100%;
    height: 9240px;
    background-image: url("https://i.ibb.co/BGdkZSr/Background.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.test {
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    color: aliceblue;
}

I don’t understand why margin doesn’t work on this situation…

Thank you for your help! <3

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    it's better for me but it's not really what I want.

    I fact, I need a responsive background but how is cropped when the screen reaches a certain size.

    When I resize the navigator screen or when I run the website on a phone, I need to my components fits with the background.

    I don't really know how to explain so this is my desktop mockup : https://www.figma.com/proto/FMdyPJPhAj0nZ2Imijb7AT/Portfolio?type=design&node-id=132-135&t=egbyuNNokST74c46-1&scaling=scale-down&page-id=0%3A1&starting-point-node-id=132%3A135&show-proto-sidebar=1

    And my phone mockup : https://www.figma.com/proto/vl1Sg0yzMOpQ7jFSxF96oH/Portfolio---Mobile?type=design&node-id=27-1140&t=KTviXrPeFX4hRCHK-1&scaling=scale-down&page-id=0%3A1&starting-point-node-id=27%3A1140

    And this is a really good example of what I want to do : https://lesenchanteurs.fr/

    Thank you for your help :)


  2. 0

    I think you should update styles of .bg and .test like this.

    .bg {
    position: relative;
    width: 100%;
    height: 100vh; /* Set the height to the viewport height to make it scrollable */
    background-image: url("https://i.ibb.co/BGdkZSr/Background.png");
    background-repeat: no-repeat;
    background-size: 100% auto; /* Set the background size to scale width to 100% */
}

.test {
    width: 200px; /* Set a specific width for the element */
    margin: 0 auto; /* Center the element horizontally */
    color: aliceblue;
}

    Hope this one helps you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search