did you try wrapping it in quotes and getting rid of the first period for the URL.
background-image: url("./368725.jpg"); /* Just one period here not two */
did you try wrapping it in quotes and getting rid of the first period for the URL.
background-image: url("./368725.jpg"); /* Just one period here not two */
Sorry, since last night i been trying all the combination with āā or āā or ā¦ or / or \ with URL or local, still doesnāt work.
doesnāt work i been trying all the combinations
What I mean is:
.header_image {
background-image: url(ā368725.jpgā);
color: red;
}
<header class=āheader_imageā>
Sorry Curtin, iām trying with diferent images, diferent sizes and nothing works. I wanna die. It works to you if you copy and paste the CSS and HTML? can you take a capture of the result?
You can also add your project to codepen so we can see everything
I agree as well, weād probably figure this out much faster.
Are you sure the header
element is not just collapsed (0 height). If you give it a height can you see the image?
background-size: cover;
height: 100vh;
This does work I just tested it and Iasjorg is correct add height and the other suggests as well
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: tahoma;
}
header {
height: 100%;
color: red;
background: url("atomeditor.jpg");
}
.hero {
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-40%, -50%);
}
</style>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>testing</title>
</head>
<body>
<header>
<div class="hero">
<h1>Goodbye Junkfood!<br>Hello Sushi!</h1>
</div>
</header>
</body>
</html>
OMG THANKS IT WORKS.
THANKS TO EVERYONE, you guys are very nice people!
I have to study a lot to not do this kind of mistakes again.
REALLY THANKS TO EVERYONE!
one small point to addā¦use caution with any *{}
Dang I was about to put pretty much the same thing. Glad we got this figured out!
Great, good to hear it is working.
I would suggest learning the browser developer tools (Video). The DOM Inspector is super helpful.
Check your .hero class. It might be overwriting something of the header, for cascade. Then, did you close the curly brace } ?
Thank you for the thread. Iāve been struggling with this issue too.
Thank you! Iāve been looking for a solution for this problem too. But there is also another problem. The background image has been applied, but the text color and font family havenāt. Do you have an idea where the problem lies?
i have also the same problem
but not recover it after applying your code
i have same problem and i getting trouble in finding solution
You declared a class called ā.header-imageā which you didnāt applied to your html. Have you tried <h1 class=āheader-imageā> Goodbye.../// </h1>
?