0

I'm trying to add an image to a page with text over the bottom of the image. I've run into 3 issues however:

  1. The image is not properly loading; it's either made up of a grid of the same image or is a crop of the original.

  2. The image is not positioning correctly, i can move it from top to bottom but cannot get it to move away from the left.

  3. The text is not properly loading on top of the image.

Here is my code:

HTML: 

<!DOCTYPE html>
<html>
    <head>
        <title>Himalayas</title>

        <link rel=stylesheet href="stylesheet.css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    </head>
    <body>
        <div class="title-image">
            <div class="title-text">
                Text Here
            </div>
        </div>
    </body>
</html>

SCSS: 

$title-left:150px;
.title-image{
    color: red;
    position:relative;
    top:$title-top;
    left:$title-left;
    height:100px;
    width:200px;
    background-size:100%;
    background-image: url(TitleMountain.png);
}
.title-text{
    position:relative;
    top:$title-top+70;
    left:$title-left;
}

Any help is greatly appreciated

Faris Amer
  • 1
  • 1

0 Answers0