Background image

Question

Hello hopefully someone can help me with my code.

For some reason my background image is not covering the whole container/box what could I be doing wrong

<section id="showcase">
<div class="container">
<h1>Affordable Proffesional Web Design</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce suscipit consequat augue eu aliquam. Suspendisse vitae magna vel velit facilisis gravidaLorem ipsum dolor sit amet,
</p>
</div>
</section>

.container{
width:80%;
margin:auto;
overflow:hidden;
}

#showcase{
min-height:400px;
background:url('../img/showcase.jpg') no-repeat 0 -400px;
text-align: center;
color:#ffffff;
}

Answer 1

try adding

background-size:100%;

before the text-align tag.
but i’m not quite sure if thats what you were looking for.

Answer 2

curious: did you want the image to be proportional? or does it matter

Answer 3

hi, sry last comment. but this might be it..
https://code.sololearn.com/W3Vn9WyjDvL0/?ref=app

Answer 4

thank you so much

Answer 5

oh you are very welcome

Answer 6

You have to make width of container equal to the size of image

Answer 7

i tried that and also giving the showcase ID its own container with a width of 100 % but the problem im running into now is that its not tesppnsive and when i shtink the screen the image kind of dissapears

Answer 8

You can try to add "background: cover;"