How do I get my background image to display in full and offset to the lower left?

user_16716709 0
Viewed 60

I am trying to style my h2 with a background image I made.

Right now the image is cropped, unless I add a silly amount of padding to the h2. I would like the background image to show in full. I would also like to position it to the lower left of the h2.Here's what I'm using, currently:enter image description here

background-image: url('.png');
background-size: cover;
background-position: left;
background-size: 300px;
background-repeat: no-repeat;

I should add that I was looking for answers on here and tried

background-position: left bottom;

and it made the image disappear altogether.

I'm just using CSS on my html, so I'm looking for answers in that vein....I'm just learning.

Thank you.

background-image css
2 Answers

Instead of cover, you could use background-size: contain.

It will display the full image, since the goal of this value is to display the entire image, while cover has to cover as much space as possible.

user_133626810 

section {
  position: relative;
  width: 300px;
  height: 300px;
  background-image: url("https://www.testdome.com/files/resources/12362/09c8d5be-c7d7-4051-8dbf-4c4b94d1bb1b.jpeg");
  background-size: cover;
  background-position: left;
  background-repeat: no-repeat;
}

h1 {
  position: absolute;
  bottom: 0;
  margin: auto
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Avatar</title>
<link rel="stylesheet" href="app.css">
  </head>
  <body>
    <section>
      <h1>Conclusion</h1>
    </section>
  </body>
</html>

user_147542860
Related