Background img problem

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.

1 Like

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.

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!

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

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

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.