Background img problem

HTML-CSS
1

Hi friends!

I have a problem, i just re-begun , cuz last time i just got hired and I didn’t had time for it, and now i started again learning html-css atm.
I watched some courses and I find myself stuck with a little problem.
The Problem:

  1. I want to add a image to my background here is the code:
body {
  margin: 0;
  background-image: url(../images/copenhagen.jpg);
  background-repeat: no-repeat;

  background-size: cover;
}

all good here, it covers my full background when maximized, but when the browser it’s not maximized i can see white under my picture and I watched solutions and vids on youtube but i couldn’t find a solution to my problem. Can someone explain to me please?
I tried by resizing the image to make it the perfect size, once was too big that i had to scrool down, once to small, and i didn’t want to stretch it so it not look bad and blurry.

  1. I want to make half-screen like right-half or left-half with white and opacity(transparency) like 30%, and don’t know how.

SOrry if I didn’t write the correct way, i haven’t written in english for a long time.

2

Hello @Hailztorm !

If you see white it is because of the size of your image and the property no-repeat you used. If you use the repeat property, you will see the background repeated but I think it is not what you are looking for because it will not be good to watch. Maybe try another pic if you don’t wanna repeat that one.

3

well, if it’s too big, i have to scrool down to bottom to see the entire image.
I tried with multiple images.
thank you for your answer!

4

Hi there.
Friend write this code, I will be happy to help.
background-position:center;

5

You can used the fixed property maybe. And you are really welcome @Hailztorm :grinning: