Hi i dont know how to make this picture a backround im not that good with codepen
please help me
https://codepen.io/pen/?template=WNxPJeG
ive been stuck for like 1 month
no i havent ill try thanks
my project is so messy idk what to do
the backround isnt working
I tried the first option and it worked for me.
You are probably going to have to change the color of the text and remove the other picture in the middle.
But at the least the background part works.
ill try and thanks for the help
whitch one do i put it in the css one or html one?
It goes in the css section.
could you show me the code?
@import url(src="https://i.postimg.cc/CLzpmqYM/images-2.jpg">);
* {
html {
background: url no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
height: 500vh;
display: grid;
place-items: center;
font-family: "Nunito", sans-serif;
is there anthing wrong with this code?
Yeah there are syntax errors. That is why it is not working.
In the example I sent you, all you have to do is copy the html selector and replace their img with yours.
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
And Delete the import at the top.
i did all those steps and it doesent work
url(src="https://i.postimg.cc/CLzpmqYM/images-2.jpg">);
* {
html {
background: url(https://i.postimg.cc/CLzpmqYM/images-2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
height: 500vh;
display: grid;
place-items: center;
font-family: "Nunito", sans-serif;
--primary: #2c2c2c;
--blue: #14b0ee;
}
h1 {
font-family: "Roboto Slab", serif;
color: var(--primary);
}
ul {
list-style: none;
}
#videoBkg {
position: fixed;
z-index: -1;
}
.hero-section {
position: absolute;
top: 30%;
left: 12%;
transform: translateY(-30%);
z-index: 10;
}
.hero-section > * {
transform: translateY(80px);
opacity: 0;
animation: fadeUp 1s ease-out forwards;
}
.hero-section h1 {
font-size: 5rem;
}
.hero-section p {
font-size: 1.2rem;
margin: 4em 0 2em 0;
line-height: 30px;
}
.hero-section p strong {
color: var(--blue);
}
.hero-section button {
border: 2px solid var(--primary);
padding: 1em 1.2em;
outline: none;
background-color: transparent;
text-transform: uppercase;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 1px;
cursor: pointer;
transition: background-color 0.3s;
}
.hero-section button:hover {
background-color: var(--blue);
color: #ffffff;
border: 2px solid var(--blue);
}
.hero-section h1:nth-child(2) {
animation-delay: 0.2s;
}
.hero-section h1:nth-child(3) {
animation-delay: 0.5s;
}
.hero-section h1:nth-child(4) {
animation-delay: 0.8s;
}
.hero-section p {
animation-delay: 1s;
}
.hero-section button {
animation-delay: 1.2s;
}
.menu-section {
position: fixed;
width: 34%;
top: 5%;
right: 12%;
transform: translateY(-30%);
z-index: 20;
padding: 1em;
display: flex;
justify-content: space-between;
text-transform: uppercase;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 1px;
color: var(--primary);
}
.menu-section li {
float: left;
margin-left: 20px;
cursor: pointer;
transition: color 0.3s;
}
.menu-section li:hover {
color: var(--blue);
}
.menu-section p {
color: var(--blue);
}
.menu-section p span {
color: var(--primary);
}
@media (min-aspect-ratio: 16/9) {
#videoBkg {
width: 100%;
height: auto;
}
}
@media (max-aspect-ratio: 16/9) {
#videoBkg {
width: auto;
height: 100%;
}
}
@keyframes fadeUp {
0% {
transform: translateY(80px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
i hope this works
You still have syntax errors.
Delete this
and you can’t have the html selector nested inside the all selector tag.
You are almost there.
You need to change it from the all selector to the html selector like in the example
html {
background: url(https://i.postimg.cc/CLzpmqYM/images-2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I moved your other topic to this one.
Please do not create duplicate topics for the same challenge/project question(s).
Thank you.
Also, I think it will help if you review the css lessons on freecodecamp.
After completing the lessons, it will give you a stronger knowledgebase and you will have more success creating your projects.
1 Like
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.