Problem with background image in a bootstrap theme

HTML & CSS
1

I have a problem with a bootstrap based theme on a Drupal site. The site is at julianhomes.frminteractive.com. If the site is viewed on very large screens, the background image (the image of the bathroom and tub) does not scale. Instead it begins to repeat. Also the image does not scale down for small screens.

I am fairly new to bootstrap. Any ideas on how to fix this.

2

Try adding this rule after the header styles.

.header{background-size:cover;}

e.g.

.header {
  background-image: url('../images/modern_bath.jpg');
  background-attachment: fixed;
  background-size:cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  max-width: 100%;
  height: 100vh;
}
3

I’d also look at using images of varying sizes and calling in the correct one for a range of screen widths. I think if you do as @PaulOB says at the moment it would stretch your image on my monitor and it would be really grainy. I’d probably have 3 or 4 different size images and use @media queries.

4

Thank you both for the suggestions. I will give these a try.

5

You would still need the rule I gave above even if you use multiple images as they need to ‘cover’ every screen size not just 3 or 4.

I dislike it when there are multiple images being loaded because I constantly park my screen to allow other apps to be visible while I work and that would mean instead of loading just one image I would be forced to load possibly all your versions of the image just because I opened my window.

I would agree that maybe from 800px and smaller you can reduce the image size but you still need background-size:cover for this effect.

I often find that my optimised large images are smaller in file size than most people are using for their small images so the key is good optimisation and then use as few images as possible unless its for art-direction and then other factors may need to be considered.:slight_smile:

As an aside srcset is good for supplying different images because the browser makes the decision on the best available for the device viewing.

1 Like
6

yep sorry i don’t think i explained correctly i was agreeing with you and the use of cover for a single image. I was adding in the same as you’ve put that using an @media query at less than 800px etc you can load a different image that would be smaller in dimensions and filesize. On a mobile size it may even be necessary to change the image to a different aspect etc as well. all easily done via css.

Definitely not splitting the image into 3or4 as this would add latency for each http request as you say.

1 Like
7

thats brilliant. Thanks for posting that. I was unaware this was possible, will look at implimenting this in our site i think.

2 Likes
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.