Use my own css



  • 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'),
      },
    


  • @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.



  • @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



  • 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>
    


  • @acros

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

    Screen Shot 2020-11-09 at 16.19.17.png

    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.


Log in to reply