Background image | SoloLearn: Learn to code for FREE!

0

Background image

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; }

5/8/2020 7:32:23 PM

Joe Trotter

9 Answers

New Answer

+2

try adding background-size:100%; before the text-align tag. but i’m not quite sure if thats what you were looking for.

+1

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

+1

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

+1

thank you so much

+1

oh you are very welcome

+1

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

0

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

0

You can try to add "background: cover;"