-
Posts
-
Hi,
I contact you because I have a two problem :
– with the color section background I don’t found the perfect image size ( or proportion) for cover completely the screen without crop image border I have trying to change dimensions but without success..
And I have different result if I look with mac book air 11′ and a pc 15,4′ (I want max height to 100% of div section), in the setting I try to used option “scale to fit” but I see white border using 1500x1000px– regarding responsive mobile behaviour, that doesn’t works.
I work for this problems for several weeks without solution and I despair, could you help me please? :)
and I’m very sorry for my basic english..(I have to do this with different images)
Thanks for your help!
Hey morganeL,
Could you provide us with a link to the site in question so that we can take a closer look please?
Regards,
RikardHi,
Please deactivate all plugins one by one to check which one is causing this issue and let us know if this solves the problem.
In addition to that, please let us know if we are allowed to deactivate one or more of your plugins as well for testing purposes :)Wordpress is cropping images by default when uploading them. You can control this behavior with a plugins like https://de.wordpress.org/plugins/simple-image-sizes/
Best regards,
AndyHey Andy,
I have deactivate all plugins, but its the same issue.
In mobile view I see only the bottom of the image, while the position is center-center
Yes, you can deactivate plugins if you need it. Just reactivate the maintenance plugin unless it is the problem :)
I’ll check the link plugins thank you for the advice,Best regards and thank you for your help,
Morgane
Hi,
Note the background size property of the image inside the color section is set to “cover” which means that it will force the image to cover the whole container and in order to retain the image’s aspect ratio, it will have to cut off parts of image or it has to overflow outside the color section container. We can set the background size property to contain or 100% but it may leave white spaces or distort the image. Which one do you prefer? We use “cover” (http://www.w3schools.com/cssref/css3_pr_background-size.asp) because it is the simplest solution to make a background image responsive on most screen sizes. Another workaround is to create multiple version of the image with different sizes then apply it on a particular screen size using css media queries but it will require more work.
Best regards,
IsmaelHey,
Thank you for reply and sorry for my late return,
I think its more easy to use “cover” but I prefer using css media queries for a better result on all screen size. I am going to make search on that but how to be sure to have the sizes of every device?Thank you for your help :)
Best regards,
Hi,
Search for the standard screen sizes use nowadays. That should give you an idea which image sizes to use. Like here for example: http://www.w3schools.com/browsers/browsers_display.asp
Best regards,
IsmaelThanks for reply Ismael,
For example I use these is correct ?
/* ———– iPad mini ———– */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
{ .background-size: cover;
}Best regards,
- You must be logged in to reply to this topic.