How do you make a proper background image and have the page size match?

Bootstrap Studio Help
1

I’m having this pictured issue:

image
image1920×1080 111 KB

How do I make the page size match the image?

2

Like this

body {
  background-image: url(assets/img/accounts/pillars_of_creation.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #464646;
}

/* For mobile devices */
/* The same picture but a little smaller */

@media only screen and (max-width: 767px) {
  body {
    background-image: url(assets/img/accounts/pillars_of_creation_mobile.jpg);
  }
}
1 Like
3

@kuligaposten why can’t BSS handle this common task?

4

You can do it in the appearance panel, when you are happy with the result you can extract the element style to a CSS class via the three dots in the styles panel.
BSS handle it easy for you a few click and you are finish

1 Like
5

@kuligaposten I see that now, but how do you get BSS to make the @media only lines?

6
1 Like