0

I have an app https://bootstrapp3.herokuapp.com/ the background image changes size when I add text. After using the inspect element function on the browser it seems that it is the font-size property that is affecting the background-size property, since when I uncheck the box related to font-size using inspect element, the background-size returns to the normal size. Why is the background size changing? compare the following two pages from the app:

Without text and font-size: https://bootstrapp3.herokuapp.com/pages/page1

Background-size changing due to font-size: https://bootstrapp3.herokuapp.com/pages/consulta

note that the only difference between the pages is the content in the view. Both pages inherit from the application layout.

css with the background size:

body {
    background-image:image-url('gotita.png');
    background-size: cover;
    background-repeat: repeat;
    background-position: 0 51px;
}

font-size element:

p {
  font-family: 'Architects Daughter';
  font-size: 20px;
}
Owen
  • 361
  • 1
  • 5
  • 16
  • It due to background-size: cover; property. Read this https://www.w3schools.com/cssref/css3_pr_background-size.asp – Nandita Sharma Jun 06 '18 at 09:17
  • Because you set it to _cover_ the body, and the size of the body changes when you add more content …? – CBroe Jun 06 '18 at 09:17

3 Answers3

0

You have set background property to cover. If you want to make it independent then apply the background to an empty div having the size you want to set. Then add text in another div having its position to absolute.

Now, changing the font size will not affect the background image.

Rajat Jain
  • 1,339
  • 2
  • 16
  • 29
0

It's because you are using:

background-size: cover;

on the body element. The height of the body is relative to all of the child elements. So, because of that, the background-image has to adapt to fill the height.

To make the background image the same on all the pages not depending on the content you could remove the background image from the body tag and make a div inside the body tag with position fixed, like:

background-image: url(/assets/gotita-7c57f01….png);
background-size: cover;
background-repeat: repeat;
background-position: 0 51px;
position: fixed;
Gregor Ojstersek
  • 1,369
  • 7
  • 12
0

Have a look at the background-size attribute you have assigned. This attribute can be described as follows:

  • contain : "Scales the image as large as possible without cropping or stretching the image."
  • cover : "Scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains."

Source: MDN Web Docs

Sphinx
  • 956
  • 7
  • 21