CODEWITHSUNDEEP
cssvuetify.jsbackground-image
RGriffiths
RGriffiths

Reputation: 5970

Vuetify v-row background image height

I am trying to put a background image in a v-row such that the width fills the screen and the height of the v-row adjusts automatically.

<v-row class="bg" align="center" justify="center">
    <v-col cols="12" sm="6" md="4">
      Date picker 1
    </v-col>

    <v-col cols="12" sm="6" md="4" background="white">
      Date picker 2
    </v-col>
</v-row>

.bg {
  background: url("../assets/hills.jpg") no-repeat center center;
 }

Without any height styles I get #1. I would like the effect shown in #2:

enter image description here

So how can I set the height of the v-row to fit the height of the image? I realise

height: 100%

won't increase the height of the containing v-row - the style being applied to the v-row not the image. This

height: 100vh;

works to an extent, but the height reflects the height of the viewport, not the background image and is therefore too large. A fixed height will work

height: 600px;

but will need to be adjusted for screen size.

Is there an solution?

Upvotes: 0

Views: 2453

Answers (1)

swervo
swervo

Reputation: 769

If you want to use an image you could use:

position: absolute;
object-fit: cover;
width: 100%;
height: 100%;

Then this will grow to the size of the content (providing the parent is position: relative; whilst remaining proportional. If you adjust the padding on the content with media queries or similar you should be able to get the effect you are looking for.

Upvotes: 1

Related Questions