Kevin Powell - Community•2y ago

background image

Hi everyone I realise a web site who look like this

11 Replies

Pat66OP•2y ago

the problem is the picture don't cover the div

Pat66OP•2y ago

my html code:

<div class="two">
                     
                      
                        <p class="letter1">s</p>
                      
                        <p class="letter2">e</p>
                      

                      
                        <p class="letter3">r</p>
                      
                        <p class="letter4">e</p>
                      
                        <p class="letter5">n</p>
                      

                      
                        <p class="letter6">a</p>
                      
                       
                      


                    </div>

<div class="two">
                     
                      
                        <p class="letter1">s</p>
                      
                        <p class="letter2">e</p>
                      

                      
                        <p class="letter3">r</p>
                      
                        <p class="letter4">e</p>
                      
                        <p class="letter5">n</p>
                      

                      
                        <p class="letter6">a</p>
                      
                       
                      


                    </div>

my css:

.two{
    width:500px;
    height: 100vh;
    margin-left:140px ;
    position: relative;
    background: url("assets/williams.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position:50% 20%;
}

.two{
    width:500px;
    height: 100vh;
    margin-left:140px ;
    position: relative;
    background: url("assets/williams.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position:50% 20%;
}

What should I do make the picture appear completely ? thanks by advance

Unknown User•2y ago

Message Not Public

Pat66OP•2y ago

sorry Im a french guy my english is not well the image should appear in the div with a class .two but the image don t appear completely

Jochem•2y ago

what can really help with people answering your questions is to use something like codepen (https://pen.new) so that you can show the issue if you need to use photos there, you can use something like https://picsum.photos to get random images of any size if you only share the code like you have, people have to try to reason about how the browser will render that, if you have a live example people can just see how it renders

Unknown User•2y ago

Message Not Public

Pat66OP•2y ago

the with codepen is the assets I don t know how to had the image

Unknown User•2y ago

Message Not Public

Pat66OP•2y ago

yes

Unknown User•2y ago

Message Not Public

Pat66OP•2y ago

I get the solution I change the background -size cover to contain

Gaming

Programming

background image