Problems with having a background picture [unclear how to add or edit]

Tagged: , ,

Author Posts

panknot December 17, 2013 at 1:24 pm

Notice: this information was written when Microthemer version 2 was current. On Dec 26th, 2014 version 3 was released with a completely new interface. Some of the information may be redundant, but as much of the functionality remains the same in version 3 we haven't deleted this post.

Hi,

I’ve recently bought Microthemer Plugin for wordpress and it works great, but I’m having a problem with having a background picture. I can change the the color of the background, but If I select Background picture it won’t show anything or there aren’t any button as in upload.

These are the select able text that I can see:
Image, View Images (Clicking on them doesn’t do anything) except. Image, but that shows a tutorial.
And if I select the Drop Box, it comes with “Blank” and under that “none”.

This is my website http://meerkerk.sitebysite.nl/
I hope someone can help me with this.

Regards,

Erick

Sebastian December 18, 2013 at 10:51 am

Hi Erik,

Before you can include a background image via the Microthemer UI background-image option, you need to upload the image(s) via the Microthemer > Manage Themes page. This video shows you how (around the 50 second mark): https://www.youtube.com/embed/yCo-5B5p6oM?vq=hd720&autoplay=1

Once you’ve uploaded an image to any Micro Theme/settings pack it will appear in the Microthemer UI.

Tip: you may want to install a graphics pack too: https://themeover.com/graphics-packs/

Please let me know if you need further assistance with this.

Cheers,

Sebastian

panknot January 7, 2014 at 2:19 pm

Hi I have another problem now.

I have a background now, but the problem is when I zoom out the background image goes to the left. I want when I scroll out (zoom out) then it will stay the size of the Browser.

http://meerkerk.sitebysite.nl/

Is this possible in Microthemer?

I hope to get an answer as soon as possible.

Thank you

panknot January 7, 2014 at 3:03 pm

I also forgot to ask, Because I have 2 of the same themes and I want both of them to be different colors is there a possibility to do that without microthemer make both of them the same colors.

I want to be able to use Microthemer on a clone of the website, but on the same WordPress Domain.

Thank you.

Sebastian January 7, 2014 at 3:17 pm

Hi Erik,

1. I think you just need to upload a bigger picture. There is no way to freeze the zoom level of individual elements of a web page so that certain things don’t zoom out when you zoom out with the browser. Also, if you set the background image position to “center top” the image will remain centered at least when you zoom out.

2. If you are able to install wordpress in a sub-folder of your current domain (I’m not 100% sure if this will cause problems or not, I’ve never tried it) then you will also be able to install a separate instance of Microthemer on your 2nd wordpress install (in the sub-folder). In which case, you can apply what ever design you like on the 2nd theme.

Cheers,

Sebastian

panknot January 8, 2014 at 9:24 am

Hi Sebastian,

Thanks for quick response.

1. Has been fixed thank you the help.

Now when I go to meerkerk.sitebysite.nl on my Mobile Device the background will go to the left side of page and half of my page only has the Background. Is there also a fix for this?

This is how I see it on my Iphone http://picpaste.com/photo-lboshpZO.PNG

Regards,

Erick

Sebastian January 8, 2014 at 11:16 am

Hi Erik,

I’m no expert on this but I **think** iPhones don’t handle background images that have been set to “fixed” attachment very well. You could try applying a different background attachment to phones by using the “Phones” media query tab. You can add these device specific styling options by clicking the “+” to the left of the “All Devices” tab in Microthemer’s editing options.

Cheers,

Seb

panknot January 9, 2014 at 8:29 am

Hi Sebastian,

Is there a possibility to have this:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

In there? Because I am still studying webdesign and programming and I use this to make the Background always keep up with your resolution no matter what screen resolution you have.

panknot January 9, 2014 at 9:05 am

Hi Sebastian,

I found a solution, what I did is use a Plugin “Custom Css” and then what I did is:
div.Main {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

But another problem occured. It does work on Firefox, Safari and Chrome, but not on IE11.

Regards,

Erick

Sebastian January 9, 2014 at 12:32 pm

Hi Erik,

Unfortunately those modern additions to CSS often don’t work across all browsers (it’s up to the browser vendors to update). This is particularly true of browsers that are no longer maintained like Internet Explorer 7,8,9 etc.

Note – you don’t need a separate plugin to add custom CSS. You can do that with Microthemer. Click the spanner and hammer icon in the visual view and then the curly braces icon “{}” to load a textarea for adding custom CSS.

Cheers,

Seb

panknot January 9, 2014 at 12:34 pm

Hi Sebastian,

Oh yes I haven’t thought about that, but I will look into this.

Thank you for the information.

Regards,

Erick

panknot January 9, 2014 at 3:06 pm

Hi Sebastion,

Is there still a way for Internet Explorer 11 to have it Cover the whole screen no matter what screen resolution you have? Because this is really important for me. If there is a way trough Microthemer that would be awesome.

And also IE11 is messing up my website: http://meerkerk.sitebysite.nl/ That’s only with IE11. Haven’t tested it on lower versions.

I hope you can help me with this.

Regards,

Erick

Sebastian January 9, 2014 at 7:07 pm

Hi Erik,

If you follow ‘CSS-Only Technique #2” method here you might be able to get it to work: http://css-tricks.com/perfect-full-page-background-image/

Note, you’ll need to add the image as an HTML image (just after the tag in one of your theme files – header.php perhaps) rather than as a background image.

Good luck!

Seb

panknot January 13, 2014 at 12:10 pm

Thank you Sebatian,

Is there a possibility like a theme that you made with Microthemer and save that as your favorite and then switch to another just by a click?

Regards,

Erick

Sebastian January 14, 2014 at 1:50 pm

Hi Erik,

It’s possible to create a library of alternate designs in Microthemer by exporting your work as a Micro Theme, which can be imported back into the Microthemer UI at a later date. This video discusses importing and exporting your work (among other things): https://www.youtube.com/embed/oIPHFBWMHX4?vq=hd720&autoplay=1

Unless I’ve misunderstood what you’re asking for?

Cheers,

Seb

panknot January 14, 2014 at 2:06 pm

Hi Sebastion,

You’re awesome! This was completely perfect 1 day before my deadline. I thank you for the big help you gave me. This is my last week as a trainee at this organisation and I am very happy to have be able to complete the website.

I will be presenting the website to them on Wednesday January 15, 2014 to the people in the organisation.

Again thank you very much for your help with guiding me trough all this.

Regards,

Erick

Sebastian January 14, 2014 at 2:12 pm

Hey Erick,

No problem at all. Happy to help 🙂

Good luck with your presentation tomorrow!

Sebastian

cmgp July 12, 2014 at 5:29 pm

Hey Sebastian,
I cannot tell you how much I am loving microthemer! It has been such a huge help to me 🙂

Unfortunately, I am having one little issue. I uploaded pictures to use in the manage themes area, but when I am actually editing the theme I select the picture I want and nothing shows. Help please!

Kayla

Sebastian July 12, 2014 at 7:06 pm

Hi Kayla,

It’s good to know you’re enjoying Microthemer. Would you be able to post a link to the website you’re working on so that I can see what’s going on?

Many Thanks,

Sebastian

cmgp July 12, 2014 at 8:35 pm

Hey Sebastian,

the link to my site is http://69.195.124.225/~cookiem2/
I am transferring from wordpress.com to wordpress and I’m in the midst of redesigning my site…I’d like background images for the widget titles and so on.

Thanks,
Kayla

Sebastian July 13, 2014 at 10:52 am

Hi Kayla,

Thanks for the link. I see the problem. Your background images contain spaces in the names. Would it be possible for you to rename the images on your computer and then re-upload them? If so, I will address this problem on the next release of Microthemer (so that it can accommodate images with spaces). In a way it’s surprising that this bug hasn’t been spotted before. But I guess lots of people instinctively name images without spaces.

Note: if renaming the background images is a problem I’ll roll out a Microthemer update immediately.

Thanks,

Sebastian

cmgp July 13, 2014 at 11:50 am

Hey Sebastian,

I renamed my pictures to have no spaces in the names and re-uploaded them. Unfortunately the pictures still aren’t showing up 🙁

Any other ideas?

Thanks,
Kayla

Sebastian July 13, 2014 at 12:39 pm

Hi Kayla,

I can see that the image is now loading correctly. But you are using an image sprite. An image sprite is lots of images combined into one image. The trick to getting image sprites to work is setting the image position correctly (currently only the blank space part of the image is showing, hence it looks like it’s not working).

You will need to select “custom” from the background image position menu. This will display two additional fields. If you want the blue bits to display behind the text, you would set the “Position Left” field to -345px and the “Position Top” field to -160px. You probably also want to set the Repeat menu to “no-repeat”.

The pink area is probably a bit big for your widget titles. You would need to resize the image using something like: https://pixlr.com/editor/ In fact, if working with sprites is a bit tricky you may find it easier to crop bits of the image out of the sprite and just deal with single images.

I hope that helps. Please let me know if you require further assistance.

Regards,

Sebastian

cmgp July 13, 2014 at 2:10 pm

Hey Sebastian,

The pictures are working! Thanks so much for your help!

I just have one other issue…I can edit every element except for the category titles. As in, if you go to “recipes” and then “cakes”, I can’t edit the word “cakes”. Any suggestions?

Thanks,
Kayla

Sebastian July 14, 2014 at 10:02 am

Hi Kayla,

Have you tried the method of double-clicking the title and allowing the selector wizard to create a selector for it? If so, you may find it helps to click the up arrow on the HTML navigator once in order to travel up to the h1 tag, which has a span tag nested in it (which gets selected by default).

What styles have you tried to apply to the “Cakes” word?

Thanks,

Sebastian

You must login or register to reply to this topic.