Please help on my portfolio! Background image

Please help on my portfolio! Background image
0.0 0

#1

Hi guys, i just finished my portfolio (i’m very new at this) can you please take a look at it, give me your feedback and please tell me what’s wrong with my background images.

The last section is ok but for some reason the background images won’t fill the first two.
Would be great to get some advice here.
Also, i wanted my buttons in my contact section to stand a little closer to one another…
Thanks a bunch! https://codepen.io/astra11/full/wdXzVN/
https://codepen.io/astra11/full/wdXzVN/


#2

You have your first two sections and navbar nested in a container fluid from line 11-95. Container-fluids add 30 pixels of padding - 15 on each side, this is what you are seeing. My advice is to simply remove this container as it is completely unnecessary. Upon removing it, everything should look as intended.

Easy enough. Remove the 100% width you added to the .row, and instead add a margin to each side to make it smaller. Below should give you want you want:

.row{
  /* width: 100%; */
  margin-left: 20%;
  margin-right: 20%;
}

If you don’t want to go the margin route, it is also easily done by changing the row width down to 90% and adding the class .center-block on the row element to position it.


#3

Works perfect! Thank you so much!!


#4

It’s getting better, @astra11 !

re: https://codepen.io/astra11/full/zwmwoO/

The one thing that stands out is that your image of Van Gogh is getting squashed vertically. This is normal because the picture you’re using doesn’t have the same aspect-ratio (horizontal/vertical ratio) as the space it’s being put into… in other words, you’re forcing a portrait-oriented image into a landscape-oriented space.

I gave @fbalbino some advice about that in this thread:

Also, take a look at the tip I offered @Heather-Kay in 3 & 4 about making sure to use images from a location (like imgur.com) that you control - if wikiart.org decides to change their content, your page won’t be able to find that picture.

You’re doing great, keep at it!


#5

Thanks for your support!
Yes indeed, that image was a pain in the ass. I had to deal with it last. i will take a look at the tread and fix my page. Thanks for your advice!
:slight_smile:


#6

There’s no need for it to be a pita of you know the secret…

Download the jpg to your laptop… open it in Paint… cut a piece out of it that’s the same size as the display space you’re going to show it in… save it… upload it to Imgur… right-click the Imgur copy to get the link that includes the .jpg extension… then use that on your web page.

I think that’s six steps.

You can do it!