Planet data task

MDN Learn
, ,
1

Hi, finished planet data task from MDN.
Here it is:
Github
Finished page (do you like that design? : D )

When i load page on a phone, my background is not stretched on full height, tried:
min-height
meta tag for phones to display on full width
@media (min-height 768px)
position: absolute; everywhere
Nothing worked, what can i do?

image
image565Ă—878 182 KB

2

Hello @QuebecNova

you doing great well done just a notice about the colgroup

check this one

and here some notice about css code

  1. only use table display with element of table nothing else
  2. after will add the background as if the content is last child of the element which is body in this case
    check this to know hoe after work

you can give the background image directly to the body

by the way you can give background-color and background-image to same element and the color will be as background of that image if that what you want

The borders of the element are then drawn on top of them, and the background-color is drawn beneath them. How the images are drawn relative to the box and its borders is defined by the background-clip and background-origin CSS properties.

so remove the ::after

then you can remove all that

top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;

i guess you would increase the opacity if you like after removing those

  1. also you would need to add this to your head element

<meta name="viewport" content="width=device-width,initial-scale=1">

for better explanation of what this do you can check this

  1. ops i forget to answer the most important question

sold :moneybag: congratulations :joy:

hope that help and have a nice day :slight_smile:

2 Likes
3

I used your notices and it’s works now! Thank you so much @justsomeone! :chipmunk:

I wanted to make stars more darker by giving image less opacity and then black background will make image darker. But i can’t get less opacity of the background image without ::after. And that leads to cut my background image.
I must use photoshop in that case, or i can somehow it write in code instead(just prefer 2nd)?

4

you very welcome @QuebecNova

now i got what you trying to do sorry for miss understand it in the first time

i tried to follow this suggestion https://www.digitalocean.com/community/tutorials/how-to-change-a-css-background-images-opacity

which same as your old code but still does not work as you like the image in any way does not scale to fill the whole window even in the desktop version

so let me ask @mikoMK to help us here

and have a nice day both of you :slight_smile:

5

Hello developer friends :wave:

If I understand you correctly background-blend-mode will help in this situation.

The background-blend-mode CSS property sets how an element’s background images should blend with each other and with the element’s background color.

The different values are explained here: <blend-mode>

To make the stars darker we could use

background-color: gray;
background-image: url(../images/stars.png);
background-blend-mode: multiply;

This mixes the colors of the bg color an the bg image together which results in a darker image. By making the background-color lighter or darker you can adjust how much the image should darken. You could also add a bit of color (e. g. #62592d) to make the stars slightly yellow :slightly_smiling_face:.

Have a nice day

6

thanks @mikoMK for help i never know about blend-mode

but i guess @QuebecNova want to change the background image opacity not the element it self (body in our case)

and i guess the black background used to cover the rest of area in case the image does not fill the whole window

or maybe i am wrong as always

the problem i am facing that when using the :before/:after and resize the window the background does not fill the whole area

try to decrease the size and you will notice the scroll bar show up then go to the right and you will notice the cut in the image

and the code for the before as follow


body:before {
  content:" ";
  background-image: url("https://raw.githubusercontent.com/QuebecNova/QuebecNova.github.io/main/images/stars.png");
  position: absolute;
  left: 0;
  top: 0;
  width: 153%;
  height: 163%;
  opacity: 0.6;
background-size:100%;

}

and have a nice day both of you :slight_smile:

1 Like
7

I implemented @mikoMK solution, and it’s works great, as i wanted!
@justsomeone, i tried to use opacity to make image darker, like @mikoMK shows, not to get image more transparent.

Thank you both for helping! :shrimp:

2 Likes
8

You’re welcome! Glad we could solve it. :smiley:

Have a nice day @QuebecNova and @justsomeone
Michael

2 Likes
9

@QuebecNova @mikoMK then i am right as usual :joy:

you welcome @QuebecNova

and thanks a lot boss @mikoMK

2 Likes