Background images


#1

Hello,

My website is memedawar.com

I have set the individual row backgrounds to the same image so as to achieve a consistent parallax background image on my front page. It is working well, except the following two issues:

  1. What is the best image size for a background image on the moesia theme?
  2. The image is not responsive to the mobile theme. It simply shows a zoomed in version of the image I have selected. Furthermore, the mobile version is so long that it ends up leaving a white background at the bottom of the image for each section that is long (or tall) enough. Does the theme have any media queries built in? If not, where can I add a bunch of different media queries to support all popular mobile device screens?

Thanks so much!


#2

Hi,

  1. Background size should be 1920 px in width, because image have to be able to cover whole width of large displays without losing of image quality.

  2. Parallax general rule is to set image that is at least double in size of the containing element. Parallax effect is intended for wide screens (landscape), and mobile phones displays are portrait, and because of this parallax effect is disabled for mobile phones. Them contain css media queries, and you don’t have to add them. Although, if you want to stretch background images on touch devices you can apply custom css code below.

@media only screen and (max-width: 1024px) {
    .panel-row-style {
        background-size: cover !important;
    }
}

You can apply the code with simple custom css plugin.

Best Regards


#3

Thank you, Dimik.

After applying the CSS into the simple custom css plugin, it actually seemed to make things worse. The background image was even more zoomed in on mobile. At this point, the main thing I want is for the background image not to run out.

I need help with two things to achieve this:

  1. The Read More separator is not working properly, so the text (particularly in the My Why section) is way too long. I need the Read More separator to work.

  2. I need the background images to cover the entire row no matter how “tall or high” the section is. Is this possible?

Gratefully,

Tyler


#4

Hi Tyler,

  1. Read more separator won’t work, unfortunately moesia theme does not support such a feature on front page, sorry. You will have to shorten your text manually, and to insert link after text. If you are not familiar with html you can install https://wordpress.org/plugins/black-studio-tinymce-widget/ plugin, and you can use it instead of regular text widget. It will allow you to use regular formatting of text.

  2. Aim of the provided code was to cover whole background with zooming, if image is not tall enough. Your background image is 1680x945px, and height of element is around 1600px on mobile resolution of 480px. so only way is to set image which is taller. Your background image don’t need to be 1600 px in height, maybe around that value, and if you applie previously provided code, zooming will be less if image is bigger in height.

Best Regards


#5

Dimik,

  1. Ok, well at least that explains why it isn’t working. I can handle inserting a link after the text.

  2. So if I understand you correctly, I should make my background image 1600px high?

Best,

Tyler


#6

Hi Tyler,

  1. Yes, you can try with some image which is 1600px in height, but if you add read more for that particular section, height of that section will be lower in height on mobile view and maybe you wont have to upload new background image.

Best Regards


#7

Hi Dimik,

Ok, Now that I’ve created Read More linked text on the front page leading the visitor to a separate page, how can I get the white background and page title to go away so the only thing that shows below the header is the background image I have selected for the row and the post?

See this page http://www.memedawar.com/why/


#8

Hi Tyler,

Actually you can use Front page template to build that page even if it is not front page, and then set background image for that row :wink:

Best Regards


#9

You’re saving my life today, thanks!

One last question for today :slight_smile:

I don’t like how the videos displayed in the Moesia video widget are different heights. Is there a way to standardize the width and height that videos in that widget display with?


#10

Hi Tyler,

You’re welcome.

There is no such an option to control video height and width, videos will be displayed in HTML5 video container, and they will consume whole available space inside the holding container. This is widely accepted way of displaying videos since they will automatically fit to all screen resolutions, and to all container sizes.

Best Regards


#11

Hi Dimik,

I’m confused as to why the Deliver Us From Evil video shows smaller than the other two on my home/front page.

There must be a reason why that video isn’t as tall as the other two…


#12

Hi,

Oh, unfortunately, this is youtube bug, as you can see it is also happening on may local setup http://screencast.com/t/CctQYRFmw6lu.

You could try to download that video, upload it to youtube again and to try to embed it again.

Best regards


#13

Ok, so it’s an issue with the original YouTube upload. Thanks for all your help, Dimik!

Take care,

Tyler