CODEWITHSUNDEEP
htmlcss
Xavier
Xavier

Reputation: 31

Positioning text and image?

Here is my code: http://jsfiddle.net/vy6w2tun/1/

<html>
</html>

(1) The text is centered in the page, which is what I want.

(2) However, I would like the image centered (which it is), but I do not want the text to cover the image. I would like the image to go below the text, so that no part of the image is being covered by the text, and vice-versa.

How would I go about doing so?

Upvotes: 0

Views: 37

Answers (1)

doğukan
doğukan

Reputation: 27381

i deleted position:absolute; and top left values and transform values from p { }. İ added margin:0 auto; (for center) and width:70%; in p {}.

<html>

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box
        }
        
        body {
            margin: 0;
            padding: 0
        }
        
        @font-face {
            font-family: HelveticaNeueLTCom-Th;
            src: url("HelveticaNeueLTCom-Th.ttf")
        }
        
        p {
            font-family: HelveticaNeueLTCom-Th;
            font-size: 19pt;
            letter-spacing: 1.2px;
            color: red;
            line-height: 1.5;
            text-align: justify;
            margin:0 auto;
            width:70%; /* it's up to you */
        }
        
        .fullscreen-bg {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            overflow: hidden;
            z-index: -100
        }
        
        .fullscreen-bg__video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%
        }
        
        .img {
            display: grid;
            height: 100%
        }
        
        .center-fit {
            max-width: 100%;
            max-height: 90vh;
            margin: auto
        }
        
        @media (min-aspect-ratio: 16/9) {
            .fullscreen-bg__video {
                height: 300%;
                top: -100%
            }
        }
        
        @media (max-aspect-ratio: 16/9) {
            .fullscreen-bg__video {
                width: 300%;
                left: -100%
            }
        }
    </style>
</head>

<body>
    <div class="fullscreen-bg">
        <video loop autoplay muted src="video.mp4" type="video/mp4" class="fullscreen-bg__video"></video>
    </div>
    <p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
    <div class="img"> <img class="center-fit" src='https://grcc.net/wp-content/uploads/2015/06/Dogs-for-Rob-1-e1434850228704-1024x695.jpg'></div>
    <div class="img"> <img class="center-fit" src='https://picsum.photos/400/300'></div>
    <div class="img"> <img class="center-fit" src='https://picsum.photos/400/300'></div>
</body>

</html>

Upvotes: 1

Related Questions