VueJS background image URL – Dev Bay

Using CSS image as background in HTML element is quite obvious situation. You can do that for example as text background, for slides in carousel (slider), for articles in its listing and in many many cases. In many cases you will have one single component which must display correct data with correct background image.

Than it is important that background image URL must be set dynamically. You can’t set simple CSS rule in you static e.g. style.css file. And you can’t modify CSS file content dynamically to set proper background image URL. That’s obvious thing.

I will show you in this article how to set in Vuejs the background image URL to display right content in dynamic way. I will use for that example with “news feed” vuejs component.

Table of Contents

Demo app for background image URL in VueJS

I created small application in VueJS by Vue CLI environment to demonstrate for you how to set background image URL for HTML element. I created small “news feed” vuejs app which is shows 4 news block elements, each with:

Title
Descritpion
Image in the background

My VueJS app which uses background image URL for html block in news feed you find here:

Open demo app
Open GItHub repository – to check the whole code

More or less, app looks like on screen shot below.

You can see that title is placed on the image. So title is inside HTML element which background image is set by URL in CSS rules.

I will show you now how I created that.

App for background image URL description

This is tiny Vue CLI app – so there are just a few key elements

SingleNewsBlock.vue – component which contains whole news block (with title, image and description)
App.vue – key component, which contain array of objects with data for news and “for” loop with displays SingleNewsBlock element.
assets – images to be used in news feed (./public/assets/)

When you download or clone my app from github just type in terminal command npm run serve to run it. Vue CLI will open it in browser window.

Let’s go now step by step through my tiny app which shows real life usage of background image URL in VueJS app:

App.vue – have a look on screen shot of the code:

Main component – Vuejs background image URL app example

Let’s check that in details:

I created array of objects with news data which looks as following (as a part of data of vuejs component):

data () {
  return {
    newsData: [{
      img: 'bridge.png',
      title: "Bridge at night",
      desc: 'Lorem ipsum dolor sit amet...'
    }, {
      img: 'bridge2.png',
      title: "Highway bridge",
      desc: 'Duis placerat fermentum ipsum...'
    }, {
      img: 'building.png',
      title: "Historic building",
      desc: 'Vestibulum ac purus suscipit...'
    }, {
      img: 'skyscraper.png',
      title: "Skyscraper",
      desc: 'Aenean efficitur et ex vel luctus...'
    }]
  }
}

Next, I put SingleNewsBlock component in HTML within v-for loop using newsData data:

<SingleNewsBlock v-for="(news, i) in newsData" :key="i" :news="news" />

SingleNewsBlock.vue – have a look on screen shot of the code:

Key parts of Vuejs background image URL app example

KEY PART TO DISPLAY BACKGROUND IMAGE IN ABOVE VUEJS APP:
1. SingleNewsBlock receives news data via “props”:
```
props: {
  news: Array
}
```
2. Which looks like (from point 1 above):
```
{ img: 'bridge.png', title: "Bridge at night", desc: 'Lorem ipsum dolor sit amet...' }
```
3. HTML code is simple – just a few div with img container with title + description. The most important thing here is the background image inline style with correct URL, which is added a computed property backgroundImageInlineStyle.
```
<template>
  <div class="news-block">
    <div class="news-img" :style="backgroundImageInlineStyle">
      <h2>{{news.title}}</h2>
    </div>
    <div class="news-description">
      {{news.desc}}
    </div>
  </div>
</template>
```
4. Key part here, to display in VueJS app the background image by URL in dynamic way is COMPUTED method:
```
computed: {
  backgroundImageInlineStyle () {
    return `background-image: url("./assets/${this.news.img}");`;
  }
}
```
This computed method prepares whole string which is inserted into inline style above (point 3).
Background image URL CSS rule is built here by:
- Adding path to assets directory – which are located in ./public/assets in project.
- Image name from news object this.news.img.
5. Last important part are styles. There are some generic styles for news block element, but most important are styles for .news-img element. This styles adds generic styles for correct display of background image URL photos. So photo must be centered and always cover whole block space:
```
.news-img {
  height: 200px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
```
VueJS background image URL – the final 🙂
So here we are at the end. As you know now, the most important part here is to display iamge in dynamic way to add inline style with background-image URL property via computed method + add correct generic styles to image block element.

Demo app for background image URL in VueJS

App for background image URL description

VueJS background image URL – the final 🙂

Related posts: