英文:
Add background image to quarto website home page
问题
要在 quarto 网站的首页上添加背景图像，但不在报告页面上添加背景图像，你可以尝试以下解决方案：
- 首先，更新
styles.css文件如下，以将背景图像应用于.splash类：
.splash {
background-image: url("https://images.pexels.com/photos/189349/pexels-photo-189349.jpeg");
background-size: cover;
background-repeat: no-repeat;
}
- 在
_quarto.yml中添加include-before-body和include-after部分，以在首页上添加一个包含背景图像的div，并在报告页面上不添加：
format:
html:
theme: "styles.css"
include-before-body: before.html
include-after: after.html
- 创建
before.html文件，该文件包含以下内容：
<div class="splash">
- 创建
after.html文件，该文件包含以下内容：
</div>
这将在网站首页上添加背景图像，但不会在报告页面上添加。运行 quarto preview 以查看效果。
请注意，这只会在网站首页上应用背景图像，而不会在其他页面上应用。
英文:
In a quarto website, how do I add a background image filling the entire page but only to the home page?
I have a working solution which adds the background correctly, but does it across the entire website. In the example below, I do not want the report page to have the background image. It should have a plain white background, navbar and footer.
Reproducible example. Creating the following files:
_quarto.yml
project:
type: website
website:
title: "Sunset Sea"
navbar:
background: transparent
left:
- text: Home
href: "index.html"
- text: Report
href: "report.html"
page-footer:
border: false
background: transparent
foreground: DimGray
left: Left content
right: Right content
format:
html:
theme: "styles.css"
index.qmd
---
format: html
---
# Sunset Sea
Welcome to Sunset Sea.
report.qmd
---
title: "Report"
format: html
---
## Heading 1
This is a report
styles.css
/*-- scss:defaults --*/
body {
background-image: url("https://images.pexels.com/photos/189349/pexels-photo-189349.jpeg");
background-size: cover;
background-repeat: no-repeat;
/*background-position: center center;*/
/*background-attachment: fixed;*/
}
Run quarto preview
Possibly a solution is to add a div just before or after the body div with a specific class only on the home page and target that class with css. I am not quite sure how to go about doing that.
I have tried include-before-body but that does not cover navbar and footer anyway.
Updated part of _quarto.yml
format:
html:
theme: "styles.css"
include-before-body: before.html
include-after: after.html
before.html
<div class="splash">
after.html
</div>
Update styles.css*
.splash {
background-image: url("https://images.pexels.com/photos/189349/pexels-photo-189349.jpeg");
background-size: cover;
background-repeat: no-repeat;
}
Quarto 1.2.1
答案1
得分: 2
index.qmd 和 Report.qmd 将生成两个不同的网页。因此，如果您想为 index.html 添加特定样式，请直接在 index.qmd 中定义 CSS 样式（在 style 标签内），而不是在 style.css 中。
index.qmd
---
format: html
---
<style>
body {
background-image: url("https://images.pexels.com/photos/189349/pexels-photo-189349.jpeg");
background-size: cover;
background-repeat: no-repeat;
}
</style>
# 日落海景
欢迎来到日落海景。
style.css
（请不要在 style.css 中指定背景图像）
/*-- scss:defaults --*/
<details>
<summary>英文:</summary>
**index.qmd** and **Report.qmd** will generate two different webpages. So if you want to add any style specific to **index.html** define the css styles (within `style` tag) in the **index.qmd** directly, instead of **style.css**.
**index.qmd**
~~~
---
format: html
---
<style>
body {
background-image: url("https://images.pexels.com/photos/189349/pexels-photo-189349.jpeg");
background-size: cover;
background-repeat: no-repeat;
}
</style>
# Sunset Sea
Welcome to Sunset Sea.
~~~
**style.css**
(do not specify the background images in the style.css)
~~~
/*-- scss:defaults --*/
~~~
<hr>
[![home page with background image][1]][1]
<hr>
[![Report page with no background image][2]][2]
<hr>
[1]: https://i.stack.imgur.com/NhQj3.jpg
[2]: https://i.stack.imgur.com/BRVvV.png
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论