Kevin Powell - Community•3y ago

background image

Hi everyone I realise a web site who look like this

11 Replies

Pat66OP•3y ago

the problem is the picture don't cover the div

Pat66OP•3y 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

Monimolimnion•3y ago

what do you mean by "background don't cover the div"?

Pat66OP•3y 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•3y 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

Monimolimnion•3y ago

you want to see the whole image in the div rather than just a small part, you mean?

Pat66OP•3y ago

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

Monimolimnion•3y ago

if you need to use photos there, you can use something like https://picsum.photos/ to get random images of any size

Lorem Picsum

Lorem Ipsum... but for photos

Pat66OP•3y ago

yes

Monimolimnion•3y ago

then cover is not what you want

Pat66OP•3y ago

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

Gaming

Programming

background image

Did you find this page helpful?