Skip to content

Commit 06a08b1

Browse files
widnig89widnig89
committed
added: slides swp web backgrounds
1 parent 867b9df commit 06a08b1

File tree

3 files changed

+347
-0
lines changed

3 files changed

+347
-0
lines changed

‎slides/content/slides/SWP/WEB/08_backgrounds.md‎

Lines changed: 347 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,347 @@
1+
---
2+
theme: seriph
3+
routerMode: hash
4+
title: Backgrounds in CSS
5+
info: |
6+
## Backgrounds in CSS
7+
background: https://github.com/HTL-Wolfsberg-Betriebsinformatik/skript/blob/main/slides/content/slides/background-cover-16-9.webp?raw=true
8+
class: text-center
9+
drawings:
10+
persist: false
11+
transition: slide-left
12+
mdc: true
13+
layout: cover
14+
hideInToc: true
15+
download: true
16+
export:
17+
format: pdf
18+
dark: false
19+
withClicks: true
20+
withToc: true
21+
selectable: true
22+
---
23+
24+
# Backgrounds in CSS
25+
26+
---
27+
hideInToc: true
28+
---
29+
30+
# Inhalt
31+
32+
<Toc minDepth="1" maxDepth="1" columns="1" />
33+
34+
---
35+
layout: two-cols
36+
---
37+
38+
# Grundidee
39+
40+
CSS bietet eine Vielzahl an Möglichkeiten, um Hintergründe für Elemente zu gestalten
41+
42+
- einfache Farben
43+
- komplexe Muster
44+
- ein Hintergrundbild
45+
- mehrere Hintergrundbilder
46+
47+
::right::
48+
49+
<style>
50+
51+
.container {
52+
width: 210px;
53+
height: 113px;
54+
}
55+
56+
.simple-color {
57+
background-color: blue;
58+
}
59+
60+
.bg-image {
61+
background-image: url("https://github.com/HTL-Wolfsberg-Betriebsinformatik/skript/blob/main/slides/content/slides/background-cover-16-9.webp?raw=true");
62+
background-size: cover;
63+
}
64+
65+
.bg-gradient {
66+
background: radial-gradient(circle, white, blue);
67+
}
68+
69+
.bg-multi-image {
70+
background-image: url("./assets/images/htl-logo.png"), url("https://github.com/HTL-Wolfsberg-Betriebsinformatik/skript/blob/main/slides/content/slides/background-cover-16-9.webp?raw=true");
71+
background-position: top center, left top;
72+
background-repeat: no-repeat, no-repeat;
73+
padding: 15px;
74+
background-size: contain, cover;
75+
}
76+
77+
</style>
78+
79+
<div style="display: flex; gap: 16px; flex-wrap: wrap; height: 100%; align-content: flex-end; justify-content: center;">
80+
<div class="container simple-color"></div>
81+
<div class="container bg-gradient"></div>
82+
<div class="container bg-image"></div>
83+
<div class="container bg-multi-image"></div>
84+
</div>
85+
86+
---
87+
88+
# Hintegrundfarbe
89+
90+
Legt die **Füllfarbe** eines Elements fest.
91+
92+
- Akzeptiert **benannte Farben** (red), **Hex-Werte** (#ff0000), **RGB**(a) oder **HSL**(a)
93+
- Standardwert: transparent
94+
```css
95+
div {
96+
background-color: lightblue;
97+
}
98+
```
99+
100+
**Beispiel:**
101+
102+
<style>
103+
.container {
104+
width: 50%;
105+
height: 30%;
106+
background-color: lightblue;
107+
}
108+
</style>
109+
<br>
110+
<div class="container"></div>
111+
112+
---
113+
114+
# Hintergrundbild
115+
116+
Fügt ein Bild als Hintegrund hinzu.
117+
118+
- Pfad kann **relativ** (`images/bg.png`) oder **absolut** (`https://...`) sein.
119+
120+
```css
121+
div {
122+
background-image: url("hintergrund.jpg");
123+
}
124+
```
125+
126+
**Beispiel:**
127+
128+
<style>
129+
.container {
130+
width: 40%;
131+
height: 40%;
132+
background-image: url("https://github.com/HTL-Wolfsberg-Betriebsinformatik/skript/blob/main/slides/content/slides/background-cover-16-9.webp?raw=true");
133+
background-size: cover;
134+
}
135+
</style>
136+
<br>
137+
<div class="container"></div>
138+
139+
---
140+
141+
# Wiederholung steuern mit `backgrond-repeat`
142+
143+
Legt fest, ob und wie sich das Hintergrundbild wiederholt.
144+
145+
<br>
146+
147+
![Tile](./assets/images/doodad.png)
148+
149+
150+
```css
151+
div {
152+
background-repeat: repeat; /* default, ansonst `no-repeat` setzen */
153+
}
154+
```
155+
<br>
156+
157+
<style>
158+
.container {
159+
width: 80%;
160+
height: 40%;
161+
background-image: url("./assets/images/doodad.png");
162+
background-repeat: repeat;
163+
}
164+
</style>
165+
166+
<div class="container"></div>
167+
168+
---
169+
170+
# Positionieren mit `background-position`
171+
172+
Steuert die Position des Hintergrundbilds.
173+
174+
```css
175+
div {
176+
background-position: center center; /* vertical / horizontal */
177+
}
178+
```
179+
180+
**Mögliche Werte:**
181+
182+
- Schlüsselwörter: `left`, `center`, `right`, `top`, `bottom`
183+
- Pixelangaben: `20px 50px`
184+
- Prozente: `50% 100%` (relativ zur Elementgröße)
185+
186+
<style>
187+
.image {
188+
width: 40%;
189+
height: 35%;
190+
background-image: url("./assets/images/doodad.png");
191+
background-repeat: no-repeat;
192+
background-color: lightblue;
193+
text-align: center;
194+
font-family: monospace;
195+
}
196+
197+
.pos-center-center {
198+
background-position: center center;
199+
}
200+
201+
.pos-top-left {
202+
background-position: top left;
203+
}
204+
205+
.pos-bottom-right {
206+
background-position: bottom right;
207+
}
208+
</style>
209+
210+
<div style="display: flex; gap: 16px; height: 100%;">
211+
<div class="image pos-top-left"> top left</div>
212+
<div class="image pos-center-center">center center</div>
213+
<div class="image pos-bottom-right">bottom right</div>
214+
</div>
215+
216+
---
217+
218+
# Größe mit `background-size`
219+
220+
Bestimmt, wie groß das Hintergrundbild angezeigt wird.
221+
222+
```css
223+
div {
224+
background-size: cover;
225+
}
226+
```
227+
228+
<style>
229+
.bg {
230+
width: 30%;
231+
height: 40%;
232+
background-image: url("https://github.com/HTL-Wolfsberg-Betriebsinformatik/skript/blob/main/slides/content/slides/background-cover-16-9.webp?raw=true");
233+
background-repeat: no-repeat;
234+
background-color: red;
235+
text-align: center;
236+
font-family: monospace;
237+
color: white;
238+
}
239+
240+
.bg-size-cover {
241+
background-size: cover;
242+
}
243+
244+
.bg-size-contain {
245+
background-size: contain;
246+
}
247+
248+
.bg-size-percentage {
249+
background-size: 50% 75%;
250+
}
251+
252+
</style>
253+
<br>
254+
<div style="display: flex; gap: 16px; height: 100%;">
255+
<div class="bg bg-size-contain">contain</div>
256+
<div class="bg bg-size-cover">cover</div>
257+
<div class="bg bg-size-percentage">50% 75%</div>
258+
</div>
259+
260+
---
261+
262+
# CSS Gradienten
263+
264+
Hintergründe müssen nicht immer Bilder sein – CSS bietet Verläufe ohne externe Dateien:
265+
266+
```css
267+
.linear {
268+
background: linear-gradient(to right, red, orange, yellow);
269+
}
270+
.radial {
271+
background: radial-gradient(circle, white, blue);
272+
}
273+
.repeat {
274+
background: repeating-linear-gradient(45deg, cyan, black 10%, cyan 20%);
275+
}
276+
```
277+
278+
<style>
279+
.bg {
280+
width: 30%;
281+
text-align: center;
282+
font-family: monospace;
283+
color: white;
284+
}
285+
286+
.linear {
287+
background: linear-gradient(to right, red, orange, yellow);
288+
}
289+
290+
.radial {
291+
background: radial-gradient(circle, white, blue);
292+
}
293+
294+
.repeat {
295+
background: repeating-linear-gradient(45deg, cyan, black 10%, cyan 20%);
296+
}
297+
298+
</style>
299+
<br>
300+
<div style="display: flex; gap: 16px; height: 80px;">
301+
<div class="bg linear">linear</div>
302+
<div class="bg radial">radial</div>
303+
<div class="bg repeat">repeating linear</div>
304+
</div>
305+
306+
<br>
307+
308+
> Einen **CSS Gradient Generator** gibt es hier: https://cssgradient.io/
309+
310+
---
311+
312+
# Mehrere Hintegrundbilder
313+
314+
Mehrere Bilder sind durch Komma getrennt → Vordergrund-Bild zuerst, dann darunter liegende
315+
316+
```css
317+
div {
318+
background-image: url("logo.png"), url("hintergrund.jpg");
319+
background-position: top right, left top;
320+
background-repeat: no-repeat, no-repeat;
321+
background-size: 80px, cover;
322+
}
323+
```
324+
325+
<style>
326+
.container {
327+
width: 410px;
328+
height: 226px;
329+
margin-top: 40px;
330+
}
331+
332+
.bg-multi-image {
333+
background-image: url("./assets/images/htl-logo.png"), url("https://github.com/HTL-Wolfsberg-Betriebsinformatik/skript/blob/main/slides/content/slides/background-cover-16-9.webp?raw=true");
334+
background-position: top right, left top;
335+
background-repeat: no-repeat, no-repeat;
336+
background-size: 80px, cover;
337+
}
338+
</style>
339+
<div class="container bg-multi-image"></div>
340+
341+
---
342+
343+
# Links
344+
345+
- Lizenzfreie Bilder: https://unsplash.com/de/images/stock/royalty-free
346+
- Pattern Generator, Gradient Generator: https://doodad.dev/
347+
- Gradient Generator: https://cssgradient.io/

‎slides/content/slides/SWP/WEB/assets/images/doodad.png‎

529 Bytes
Loading

‎slides/content/slides/SWP/WEB/assets/images/htl-logo.png‎

8.6 KB
Loading

0 commit comments

Comments
 (0)