Archived topic
GB Background image - resize + position
5 replies · Started by Matthias on May 21, 2020
Hi,
i got a problem with 2 background images.
1. I wanted to have black borders (top image) - so i put a container in a container. The Background image is in the 2nd container. But it doesn't resize.
(side question: what is the best way to add a left sided headline. Mike Oliver did this with a grid rightsided so it still breaks on tablet/mobile)
2. is there a way to change the position (or size) of a background image on mobile? (2nd big image - with the lady). This one looks quite arkward positioned on mobile. Couldn't find a way to make it better. Guess you know what i mean if you look at mobile version.
Hi there,
1. How would you want the background image to resize? GB provides most of the available background image CSS options:
https://css-tricks.com/almanac/properties/b/background-attachment/
https://css-tricks.com/almanac/properties/b/background-position/
https://css-tricks.com/almanac/properties/b/background-repeat/
https://css-tricks.com/almanac/properties/b/background-size/
2. As of right now it would require CSS. However, we'll be adding responsive background image options in the pro version.
1.i dont know exactly what is used there - but i would want it to resize the same way the image-block resizes by default (e.g. the picture in the orange part).
2. ah ok. Guess i'll wait then and try to figure out an "ok" option till then. (probably a "ready when its ready" question - but: is there a date gp+ is planned to be ready?)
Background images can't resize like static images, unfortunately. They behave differently, which can be frustrating when dealing with responsive design.
No set date for GB Pro yet, but we're working on it. For you, you can target the container with some CSS:
@media (max-width: 768px) {
.gb-container.gb-container-fbab05cc {
background-image: url( 'URL TO MOBILE BACKGROUND IMAGE' );
}
}thx.
figured it out :D
contain and 70 % 100% did the trick
Also i was able to solve my 2nd problem by using position 70% x% - this way it was pushed to the left as wanted.
Awesome! :)
