-
Posts
-
Hi, I’m having difficulty maintaining the aspect ratio applied to the background colorsection. On my 27 monitor it’s perfect. On my 17 monitor he cuts the woman’s head. In the 13 monitor he cuts the woman in half. On the iphone the same thing. How to leave this background image proportional to all resolutions? Always cut underneath and top.
LINK
Hi,
Thank you for using Enfold.
Did you set the “Background Repeat” settings to “Stretch to fit”? This will set the “background-size” property of the image to “cover” (http://www.w3schools.com/cssref/css3_pr_background-size.asp). The background image will cover the whole container but parts of it will go beyond the container in order to keep its aspect ratio. You can use the “Scale to Fit” option but it will leave spaces or gaps around the container. Another workaround is to create multiple versions of the image and apply it on different screen sizes by using css media queries.
Best regards,
IsmaelIsmael, for me to use the background-size Property do I need to create a class for each image size? How do I enter custom css? Do you simulate for me a line of code?
Ismael, another question. It is possible for the block of text to decrease along with the image as the resolution decreases. Notice in the link below that the image decreases, but the text is the same size. To see this it is necessary to dominate the resolution or decrease the screen of the Chrome.
LINK
Hi,
The “Responsive Site” option of the theme is disabled. Please enable it in the Enfold > General Layout > Dimensions panel.
Ismael, for me to use the background-size Property do I need to create a class for each image size? How do I enter custom css? Do you simulate for me a line of code?
The idea is to use different sizes of the image on different screen sizes. Edit the color section element then apply a unique ID in the Section ID field, use “custom-section” for example. We can use this ID to change the image on different screen sizes. Add this code in the Quick CSS field.
/* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 989px) { #custom-section { background-image: url(IMAGE URL FOR IPAD) !important; } } /* Mobile Styles */ @media only screen and (max-width: 767px) { #custom-section { background-image: url(IMAGE URL FOR IPHONE) !important; } }Create different sizes of the image then adjust the background image url or value.
Best regards,
Ismael
- You must be logged in to reply to this topic.