I can’t lay the h1 text over the background image. Also, the background image is far too large
Hi there!
For Dasmoto’s Arts & Crafts, you should be setting background-image on the h1 directly.
h1 {
background-image: ;
}
On a constraining parent container will also work. To my way of thinking, giving any textual element a background image is more difficult to maintain, and override if we wish to test variants. Headings are text. They are not containers for other content, not even a background image.
I tried that, but when I posted the URL, it didn’t work. All it resulted in was my webpage displaying a broken image icon and the text “Desmoto’s Arts & Crafts” without any of the formatting.
We may better help when things are in the open and laid bare. Please show us your markup, the CSS, and a screenshot of how the page appears at present.
We can leverage the semantic element: <header></header> and use that as the constraining parent.
<body>
<header>
<h1>Dasmoto's Arts & Crafts</h1>
</header>
<main>
</main>
</body>
In the CSS we will load the background image into the HEADER.
header {
width: 100%;
height: 200px; /* set to suit */
line-height: 200px; /* same as height - vertically center text */
text-align: center; /* remove text-align from H1 rule */
background-image: url(skin/pattern.png);
background-size: cover;
}
This is not tested, but should serve as an example to guide you along.
Note that above I have the background image in a folder within the CSS folder, which is a great place to keep skin images for easy access from that folder, and the CSS itself without having to traverse up and over to the images folder.
Please post a link to the landing page for this project so we can download the ‘pattern’ image as stored for the project. We’re set up to test once we have that image file.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dasmoto's Arts & Crafts</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<h1>Dasmoto's Arts & Crafts</h1>
</header>
<main>
</main>
</body>
</html>
header {
width: 100%;
height: 12em;
line-height: 12em;
text-align: center;
background-image: url(skin/pattern.png);
background-size: cover;
}
h1 {
font-family: Helvetica;
font-size: 6em;
font-weight: bold;
color: khaki;
}
Definitely review the CSS around background-size and position, et al. None of this CSS should be taken lightly. Every declaration is given with an explicit purpose, none of them of some external requirement. It is design based; we give the orders.
Even while this may be a concern for some time later in the course, it is at this juncture, and for the purpose of this demonstration necessary to introduce a technical aspect of responsive design, and the tool at our disposal for that purpose: media queries.
Consider,
@media (width <= 1080px) {
header {
height: 8em;
line-height: 8em;
}
h1 {
font-size: 4em;
}
}
@media (width <= 760px) {
header {
height: 6em;
line-height: 6em;
}
h1 {
font-size: 2.75em;
}
}
@media (width <= 540px) {
header {
height: 4em;
line-height: 4em;
}
h1 {
font-size: 2em;
}
}
Plug that CSS into the previous example and refresh the page. Now expand and contract the window width from largest to smallest and back again. Notice anything different along the way?
This one question turned out to be packed with lots more questions, but also discoveries. Notice how with the background being independent of the heading it can scale on its own, and as we increase and decrease the width we can see this happening? We had no hand in that, only in how we adapted to it.
We’re scratching the surface, here, and should not distract from your learning. Keep this idea in tow, as one goes.
Thanks for your help. It seems the main reason was that the images for the project aren’t saved on my computers as jpegs, but rather links to the webpages where those files are found. I’ve tried to save them as jpegs, but for whatever reason I can’t. I’ll just have to set the URLs to content.codecademy
1 Like
Thanks. I finished the project by linking to the images on content.codecademy, but I’ll probably edit my code later to include the jpegs here. And yes, they did download onto my computer as jpegs
1 Like
OK, so for whatever reason, css won’t let me set the background image to a file stored on my computer. I was able to finish the project by linking to the pattern image on the website, but any advice on how to link to my computer would be appreciated for future projects.
Let’s have a look at your code, maybe spot the problem.