Image cuts off and I am having trouble positioning it

user_13684079 0
Viewed 30

I want to put this picture on my website:

enter image description here

However when I do this is how it comes out. Without the full image showing:

enter image description here

Here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <title>Sarah's Calligraphy</title>
    <style>
        #bg{
            /* background-image: url(https://i.pinimg.com/originals/b0/fd/35/b0fd3593f98cab4ae98aa4bfe064acaa.jpg); */
            background-image: url(sarah2.jpg);
            background-repeat: no-repeat; 
        }
    </style>
</head>
<body>

    <div id = "bg" class="jumbotron jumbotron-fluid">
      <div class="container">
      </div>
    </div> 
 
</body>
</html>

Where you see Jumbotron is where the image is supposed to go. Within the container that is inside the jumbotron.

bootstrap-4 css html
3 Answers

The image having big height small width so it see like this(width = 766px and height = 1280px),

Here we use background-size property for this

First of using : background-size:contain;

#bg{
    background-image: url(https://i.pinimg.com/originals/b0/fd/35/b0fd3593f98cab4ae98aa4bfe064acaa.jpg);
    background-repeat: no-repeat; 
    background-size:contain;
}


#bg{
    background-image: url(https://i.pinimg.com/originals/b0/fd/35/b0fd3593f98cab4ae98aa4bfe064acaa.jpg);
    background-repeat: no-repeat; 
    background-size:contain;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <title>Sarah's Calligraphy</title>
</head>
<body>
    <div id = "bg" class="jumbotron jumbotron-fluid">
      <div class="container">
      </div>
    </div> 
</body>
</html>

using : background-size:cover; with height:100%;width:100%;background-position:center;

#bg{
    background-image: url(https://i.pinimg.com/originals/b0/fd/35/b0fd3593f98cab4ae98aa4bfe064acaa.jpg);
    background-repeat: no-repeat; 
    background-size:cover;
    height:100%;
    width:100%;
    background-position:center;
}


#bg{
    background-image: url(https://i.pinimg.com/originals/b0/fd/35/b0fd3593f98cab4ae98aa4bfe064acaa.jpg);
    background-repeat: no-repeat; 
    background-size:cover;
    height:100%;
    width:100%;
    background-position:center;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <title>Sarah's Calligraphy</title>
</head>
<body>
    <div id = "bg" class="jumbotron jumbotron-fluid">
      <div class="container">
      </div>
    </div> 
</body>
</html>

user_133686580 
#bg {
.
.
.
    background-size: contain;
}
user_74262290

Use the CSS background-size property and background-position to to set the images according to your needs! Use cover or contain with background-size and top, bottom,left right with background-position alternatively you can also use float. For more info: Click here! Also use the no-repeat property if needed.

user_138226450
Related