Hi Tom,
This is helpful, getting closer now… I can feel it! Full screen and mobile are good.
However, I’m getting no image for tablet when in the vertical position (on an actual tablet IPAD Mini). In the horizontal position the image is there, but I’m not getting much of the image – even with the bottom padding set to 350 or more. This also reduces the quality of the image I can tell.
Maybe I need a specific image size with specific CSS for this view, what do you think?
I have images sizes of 1280×860 fullscreen, 1024×689 tablet and 768×517 mobile.
Here’s the code I was using:
@media (min-width: 1025px) {
.site-header {
background-image: url(http://www.yporganics.com/wp-content/uploads/2016/11/homepage-image-center-1280×861.png);
}
.inside-header {
padding-top: 0px;
padding-bottom: 350px;
}
}
@media (max-width: 1024px) {
.site-header {
background-image: url(http://www.yporganics.com/wp-content/uploads/2016/11/homepage-image-1024×768.png);
}
.inside-header {
padding-top: 0px;
padding-bottom: 350px;
}
}
@media (max-width: 768px) {
.site-header {
background-image: url(http://www.yporganics.com/wp-content/uploads/2016/11/homepage-image-bottom-768×517.png);
}
.inside-header {
padding-top: 0px;
padding-bottom: 120px;
}
}
If there’s anything you can help with I’d really appreciate it!
Thanks,
Michael