Cannot increase height of image

HTML-CSS
#1

hi, am new to web development. I am unable to increase the height of my image container. please help me sort this issue. the image height doesn’t increase more than 300 pixels.

#main {
    background-image: url(images/background.jpg);
    background-size: cover;
    background-position: bottom center;
    width: 100%;
    height: 700px;
}

#main .content h1 {
    position: relative;
    top: 50px;
    margin: 0 auto;
    width: 400px;
}
#2

What are the actual dimensions of the image?

#3

Thank you for replying. Dimensions for the picture iam using is 1440 x 750 pixels.

#4

Do you have a link to your project (i.e. Codepen), so we can see all the HTML and CSS for the page?

#5

Is there anything in this MDN for scaling background images that helps you? I see you are using background-size: cover which the MDN describes as

" The cover value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimensions are greater than or equal to the corresponding size of the container."

#6

i cannot add link yet since i am new to freecodecamp.

#7

i want to add an image below my navigation bar that has a 100% width and about 900px of height for the image.

#8

Did you try fiddling with the background-size property? This is described in the link I posted previously.

You can also specify both the horizontal and vertical sizes of the image, like this:

background-size: 300px 150px;

Here is another link with more info on CSS background-size. Without having access to your project I cannot test this for you, and it’s a good opportunity to tweak your code and see the results anyways.

#9

yes but how is that going to make the image’s width 100% of the browser. i am able to make it’s width a 100% of the browser but i cannot change the height of the image more than 300 pixels.

#10

Both articles that I linked give dozens of examples of using units and keywords that modify how a background-image property can be modified using background-size. My best advice to you is to try these and see how these impact your image. You are able to use 100% width, or 100vw for the width, while using a different size for the height. Most likely your image is being constrained by a property that is restricting the height based on the width, but I cannot check this for you, you will have to check this yourself.

#11

I believe you try or recheck your style attribute.a quick example for you.
inside your BODY attribute:

<body style="background-image:url('ur image link');height:40px;width:20px;" for more details you can visit https://www.w3schools.com/html/html they are very helpful!
#12

I am still pretty new, so… but couldn’t you change the height of your image in the original html anchor tag? I don’t really know the difference in putting it in your html as appose to changing it with CSS, if there even is a difference

#13