Hi can i have help with my backround for my codepen page?

Hi i dont know how to make this picture a backround im not that good with codepenimages (2)
please help me

https://codepen.io/pen/?template=WNxPJeG
:cry: :cry: :cry: :cry: ive been stuck for like 1 month

Hi @Hewwo!

Welcome to the forum!

Have you tried to use the background property in css?

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;
}

welp this is the final product

https://codepen.io/pen/?template=WNxPJeG

tell me if it needs more

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