Tagged: background, background image, colorbox, responsive, responsive image
Hi. I am using a background image in a colorbox section on a webpage. the image size is 1920 x 790px. when resizing my browser window, the image background isn;t responsive (firefox and chrome). when using the image in an image block via the ALB, the max width is only 1310px – which is the default content width in this particular site.
I guess my question is:
how can I use an image as a full width object, but the allow it to be responsive without using a slider?
thanks!
Follow up:
heres the URL: http://mindsparklabz.com/dev/ms/business-web-marketing
also – the following script I got from a previous question about making the content within a color box top aligned instead of middle aligned isn’t working…. can you take a look at that as well?
I’ve tried the following:
CSS in child theme:
#main { vertical-align: top !important; }
main { vertical-align: top !important; }
and via Code Block in the ALB right in the page itself:
<style type = “text/css”>
main { vertical-align: top !important; }
</style>
thanks!
Hi!
Thank you for using Enfold.
The color section image is set as background and the background size property is set to “cover” which keeps the aspect ratio but it will cut off parts of the images. We can set the background size to 100% or contain but it will distort the images. You can also try the full width easy. Full description of the “cover” value: http://www.w3schools.com/cssref/css3_pr_background-size.asp
Best regards,
Ismael