Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • October 21, 2020 at 7:31 pm #1254762
    mikeens

    Hello,

    I am developing a website and would like the background image I have in my color section to be responsive to the browser size so you always see the full image in the background not just part of it. Is there a quick css solution for this?

    Thanks,

    October 23, 2020 at 7:28 am #1255156
    Rikard

    Hey mikeens,

    Some loss of image data is inevitable when using background images which covers the containing element unfortunately.

    Best regards,
    Rikard

    October 31, 2020 at 4:43 pm #1257242
    mikeens

    Hi Rikard,

    Is there anyway to try get more of the image or there is no scalability solution for using a background image?

    Thanks,

    November 2, 2020 at 5:00 am #1257510
    Rikard

    Hi,

    Thanks for the update. I checked all the available options available in CSS for this, but it’s doesn’t seem to change the look of the background on your site. If you want to experiment with it yourself then you can try the different settings for the background size:

    #background-img-responsive {
  background-size: initial; 
}

    https://www.w3schools.com/cssref/css3_pr_background-size.asp

    Best regards,
    Rikard

    November 2, 2020 at 8:13 am #1257526
    Guenni007

    in order to get a responsive background, you have to include the aspect ratio of your image in the height calculation of the container.
    So if you use an image in 16:9 format as a background, set the color-section to this relative height.
    The best way is to give the color-section a custom class or a unique ID like on my test page: https://webers-testseite.de/responsive-colorsection/

    #responsive-bg {
    width: 100vw;
    height: 56.25vw;
}

    on that the background is perfectly responsive – But what would you like to do if the container height does not offer enough place for the content?

    You have to have on that case less content or totaly responsive content inside that container. That may lead to too small and non legible font-sizes.
    See heading on mobile view f.e 375px screen width.

    November 2, 2020 at 12:39 pm #1257568
    BigBatT

    Hey @mikeens,
    try and play with this css code, for me work perfectly ;)
    In the color section, don’t add any image and in advanced option tab, add ID background-responsive

    #background-responsive {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: url(https://www.yourdomain.com/images/bg.jpg) no-repeat center top;
	position: fixed;
	z-index: -1;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

    Here my example

    Regards

    November 3, 2020 at 6:19 am #1257871
    Rikard

    Hi,

    Thanks for helping out @guenni007 and @BigBatT :-)

    Best regards,
    Rikard

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.