Account Deleted
Hello again.
For the background, you can set the height of the html
and body
elements to 100%
and use the ::after
pseudo-element
html, body {
height: 100%;
}
body {
background-color: <--- here goes the dark blue background color
position: relative;
}
body::after {
content: "";
width: 100%;
height: 50%;
background-image: url(../images/bg-mobile.png);
background-repeat: no-repeat;
background-size: cover;
position: absolute;
background-position: bottom;
bottom: 0;
left: 0;
z-index: -1;
}
@media (min-width: 768px) {
background-image: url(../images/bg-desktop.png);
}
It goes something like that, you may have to tweak some things.
You may also want to check this article about CSS naming conventions; really important in collaborative work when you're doing open-source or simply working in a company with more developers on the same project.
I saw you started using more classes and less nesting, that's very good!
@deG3nt3lm4n
Posted
@juanmesa2097 hardy har har, yeah slow and steady right hahaha but hmm why would i do it to the HTML feel like it makes more sense to do it to the body no? but hmm setting up the background in a puesudo code makes it easier? do you feel like it is best to use when playing with background images i am lowkey kind of trying to make more use of that and yeah kinda of like this method and lowkey may try to use it next time tbh
Account Deleted
@deG3nt3lm4n, In this case, is necessary because there's a full blue background color and there's an image overlapping but you could use an img
element too, although it doesn't look like the right element for this purpose to me, and yeah, pseudo-elements are really handy.