Vue 3 css v-bind attributes, color and background image url (background-attachment fixed).

ChangeBg.vue

<script setup>
import { onBeforeMount } from 'vue';

let props = defineProps({
	image: { type: String, default: '/default/default.webp' },
});

onBeforeMount(() => {
	const img = new Image();
	img.src = props.image;
});
</script>

<template>
	<div class="page_banner fixed_bg" v-bind:style="{ backgroundImage: 'url(' + props.image + ')' }">
		<slot />
	</div>
</template>

<style scoped>
.fixed_bg {
	float: left;
	width: 100%;
	height: 250px;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}
</style>

ChangeColor.vue

<script setup>
let props = defineProps({
	color: { type: String, default: '#0099ff' },
	text: { type: String, default: 'Colored Text' },
	size: { type: String, default: '25px' },
});
</script>

<template>
	<span class="colored_text">{{ text }}</span>
</template>

<style scoped>
.attribute {
	--color: v-bind(props.color);
}

.colored_text {
	margin-right: 20px;
	color: v-bind('props.color');
	font-size: v-bind('props.size');
}
</style>