I cannot seem to get the image to display properly, it keeps getting cut off and

I am trying to add an image to my website:

https://i.sstatic.net/giAdT.jpg

However, when I try to do this, the full image is not showing:

https://i.sstatic.net/VRBlB.png

This is the code I am using:

<!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>

The image should be placed within the container inside the jumbotron section.

htmlcssbootstrap-4

Answer №1

The image is displayed with a larger height and smaller width, making it appear like this (width = 766px and height = 1280px),

In order to achieve this effect, we are utilizing the background-size property

To start off, we use: 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>

We can also apply: background-size:cover; along 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>

Answer №2

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

Answer №3

To customize the positioning and size of images on your website, utilize the CSS properties background-size and background-position. Experiment with values like cover or contain for background-size, and try adjusting the top, bottom, left, and right positions using background-position. Another option is to use float for image alignment. For more detailed instructions, check out this resource: Click here! If necessary, remember to add the no-repeat property to prevent image repetition.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Stop unwanted overrides of CSS3 blinking background colors

I am facing an issue with a programmatically created table that has n rows. To distinguish between odd and even rows, I programatically add classes to them. Some of these rows have "special" content that needs to be highlighted. Currently, I am accomplishi ...

htmlcssbackground-colorcss-animations

Having trouble with Bootstrap 4 maintaining consistent width when affixing the sidebar

Hello there, I'm currently working with Bootstrap 4 and trying to implement affix on the sidebar. I have set up three columns for the sidebar and made them fixed under certain conditions. However, I am facing an issue where the width of the sidebar ch ...

javascripthtmlcssbootstrap-4

"Is it possible to apply CSS to all HTML elements except for a

I am looking to apply the specified styles to all elements except for a particular class and its descendants. html * { box-shadow: none !important; border: none !important; color: white; } I attempted the following but it did not work as intended: ht ...

htmlcss

Parallax scrolling within a div creates a dynamic visual effect

Hello there, thank you for taking the time to read this. I am currently working on a website and encountering some challenges while trying to implement a specific effect. I am aiming to achieve a parallax effect similar to what can be seen on this page. As ...

jqueryhtmlcssparallax

Is there a way to specifically style the element I am hovering over with Tailwind Typography and prose?

Currently, I am customizing my markdown pages with Tailwind typography and prose. I am facing an issue where the hover effect is being applied to all images at once instead of just the one being hovered over. Any ideas on how to fix this? Here is a snippe ...

cssfrontendtailwind-cssmarkdown

Modifying button appearance based on state change in AngularJS

I have a button with a grey color and I want to create two different states for it: one that is selected (blue) and another that is in an idle state (grey). Currently, I am working on Angularjs but I am fairly new to this platform. Could you kindly provid ...

javascripthtmlcssangularjs

Styling with CSS: The Art of Showcasing Initials or Images of Individuals

By following this elegant HTML and CSS example, I am able to showcase my initials over my photo. While this is wonderful, I would like the initials to be displayed only if the image does not exist; if the image is present, the person's initials shoul ...

cssangular

Tips for successfully passing a Prop using the Emotion CSS function

Passing props through styled() in Emotion is something I'm familiar with. For example: const Container = styled("div")<{ position: string }>` display: flex; flex-direction: ${({ position }) => (position === "top" ? "column" : "row ...

cssstyled-componentsemotion

What are the steps to make the chosen title and its content active while deactivating the others?

I am currently developing a website for an educational institution that includes schools with subdivisions such as matric, CBSE, and state board, as well as a college. My goal is to create a user interface where clicking on a specific stream (such as matri ...

jqueryhtmlcsstwitter-bootstrapnav-pills

How can I design a custom status update box inspired by the look and feel of Facebook

I have searched extensively online for a guide on creating a CSS box similar to Facebook's status update callout box. This box features a square shape with a small notch at the top. Could someone assist me in crafting a CSS design for this type of bo ...

csscallout

passing a PHP variable into an HTML input field

Recently, I've encountered a problem where I need to transfer PHP variables to HTML input fields. echo $ManuellTagnavnMain; for ($n = 0; $n < 6; $n++) { print_r(++$ManuellTagnavnMain.PHP_EOL); } I'm looking for a way to pass these values ...

javascriptphphtml

I am encountering difficulties in accessing my component's property within the corresponding template while working with Angular 5

When I call an HTTP POST method to retrieve table names from the backend, I attempt to display them in the template using ngFor. However, the table names are not appearing on the screen. The tNames property is inaccessible in the template. As a beginner i ...

htmlangulartypescript

I'm not entirely sure why I keep getting the error message stating "Cannot read property 'innerHTML' of null"

Having an issue with my JavaScript code where I am trying to insert a new table row into the HTML but keep getting an error message that says "Uncaught TypeError: Cannot read property 'innerHTML' of null" <!DOCTYPE html> <html lang=" ...

javascripthtmlhtml-tabledom-eventstr

arrange fixed-top elements in a stacked manner using Bootstrap 4

I am looking to inform users about enabling JavaScript for optimal use of the website, and I want this message to appear above the navigation bar using Bootstrap. However, currently they are stacking on top of one another instead of displaying in the desir ...

csshtmltwitter-bootstrapbootstrap-4

Exploring ways to integrate Javascript and CSS into a Bootstrap lightbox modal dialog?

Can someone help me figure out how to use the bootstrap lightbox to display a form with specific CSS style and JavaScript code for the form? I'm having some trouble implementing it. I specifically need this setup because I am using Selectize.JS to cr ...

javascriptjquerycsstwitter-bootstraplightbox

What is the Best Way to Ask Users Not to Delete Local Storage Information?

As I work on developing an application using angularJS, the need to save data locally has arisen. To achieve this, I am utilizing HTML5 local storage. One challenge faced with HTML5 local storage is that when a user clears their browsing data, all stored ...

javascriptangularjshtmllocal-storageindexeddb

Is it possible to enhance a form box with a border?

Having trouble adding a border to my bootstrap form box. I've tried applying border style properties but it doesn't seem to be working. Any suggestions? This is the class for the form box: <div class="form-box"> <div ...

htmlcsswebbootstrap-4

Updates to the Tailwind file are not appearing on the page after reopening the file

Every time I reopen the project, the file tailwind properties do not get rebuilt and if I add new properties like text-color, they are also not reflected. Any suggestions on how to solve this issue? I need the project to update and take in new properties ...

htmlcsstailwind-css

Attempting to position the calendar control at the center in Visual Studio using C#

I'm currently working in Visual Studio using C# and I've encountered an issue with centering a Calendar control within a Panel. While I have successfully centered other elements such as radiobuttons, checkboxes, and textboxes in the panel, the t ...

c#cssasp.netvisual-studio-2013calendar

Modifying the color of a div based on a specified value using JavaScript

<div id="navigation"> Add your text here </div> <input type="text" id="newColor"><button onclick="modifyColor()">Update</button> <script> function modifyColor(){ var chosenColor = document.getElementB ...

javascripthtmlcssbackground-color