Use my own css

[acros]

Im new to Quasar but have worked a lot with vue. I want to place a header image by using my own css but nothing seems to happen when I insert my backgroundimage in a div.

How come the headerimg below is not displayed? My guess was that I can combine everything with my own custom css (or only use my own css if I decide to make that choice) as I like or are there something I have to consider doing this?

An example below:

MyLayout.vue

<template>
  <q-layout view="lHh Lpr lFf">
    <div id="header-img"></div>ds
  </q-layout>
</template>

<script>
export default {
  name: "My layout",
  data() {
    return {};
  }
};
</script>

app.scss

#header-img {
  background-image: url("../assets/myheaderimg.png");
  background-repeat: repeat-x;
  height: 100%;
  z-index: 20;
  top: 0px;
  left: 0px;
  position: absolute;
}

routes.js

const routes = [{
    path: '/',
    component: () => import('layouts/MyLayout.vue'),
  },

[turigeza]

@acros q-layout takes elements such as q-page, q-header, q-header, q-drawer name it.
Not a single div. Your div is not visible because overflow is hidden on one of its parents. class="q-layout-container overflow-hidden"
You should follow the examples in the doc and use the layout builder to start with. It will save you a lot headache.

Or you could not use q-layout and use your own layout. But you will loose out most likely on other components which play well with q-layout.

[beets]

@acros In addition to what turigeza said, I think you also don’t have the correct path to the asset. I believe it should be background-image: url("~assets/myheaderimg.png");

But also, you could put this image in the /public folder, and just use background-image: url("/myheaderimg.png");

More info here: https://quasar.dev/quasar-cli/handling-assets

[acros]

Thanks. Now I just did a custom solution that works even though Im not exactly are using quasar by creating an custom header component like below. This is probably how I would have done it in vue. Dont know if there are any reason for not doing like this in quasar? Basically I find it a bit confusing and it is not obvious for me how to modify the built in classes and get them to behave the way I want. For example class="q-layout-container overflow-hidden" where is this hiding?

Header

<template>
  <div>
    <header id="header-img">
    </header>
  </div>
</template>

MyLayout.vue

<template>
  <q-layout view="lHh Lpr lFf">
    <Header />
  </q-layout>
</template>

<script>
import Header from "./Header";

export default {
  name: "My layout",
  components: {
    Header
  },
  data() {
    return {};
  }
};
</script>

[turigeza]

@acros

You can see what becomes of q-layout in chrome inspector.

If you use q-layout (you are using Quasar) you will have to put elements inside it which are compatible with q-layout. It only make sense that way.

As you found out a single un-styled div isn’t compatible. While it isn’t impossible to make it compatible … you will likely going to rebuild q-headerin the process. And this extra work you are doing for what ?

So the options are

a, Style your custom component so it is compatible with q-layout.
b, Create your own layout and not use q-layout. I think you will miss out on a lot. q-drawer to start with. Unless of course you make your layout compatible with q-drawer.
c, the best IMO is to use q-layout with the already provided compatible elements after all why reinvent the wheel.