Forum Replies Created
-
AuthorPosts
-
November 16, 2016 at 6:32 am in reply to: setting a Background image in Enfold Wedding Theme #712763
Hi, Andy,
That was a partial help but like I say, getting a fix required you to look at the way the page was displaying in order to sort the problem. I went googling and found some info that helped resolve the problem and the background is now displaying correctly.
Just in case someone else wants a solution, here is the code that works for all devices I tested and all browsers I tested:
html.html_boxed {
background: url(https:// etc) right center no-repeat repeat fixed;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
}I tried all sorts of other combinations and they either did not work at all, or only worked on a laptop.
Regarding the incorrect area of the image that was displaying, you will note that “center center” was the problem. By using “right center” or “left center” the problem was sorted. I am not a coder so cannot explain it, but that’s what worked.
For some reason the “no repeat” instruction works fine for a laptop but after the size issue was resolved meant that on mobiles only one image was displayed in the background (correct size) in the middle of the front page. So it was necessary to add a repeat for the vertical dimension. The image now displays with the correct size and is repeated as needed to cover the whole vertical display area of the page.
If anyone is having this problem I recommend checking out:
November 14, 2016 at 2:02 pm in reply to: setting a Background image in Enfold Wedding Theme #711947Hi Andy,
I have already played with the code for many hours and just now spent another two hours getting the same results playing with this code.
If you could just look at the website on a mobile you will quickly see the problem is twofold
1) the image is displaying wrongly on mobiles (only a small strip down the center is being displayed)
2) If I use the code you have provided and/or set the size for an iPhone, or an iPad then there is no border image for other size devices.I am seeking to have the border image displayed in the same way on ALL devices – whether laptop, tablet or phone.I thought that’s what responsive meant – to quote what is said next to the box to tick to select responsive: “if enabled, the size of your website will adapt and change the layout to fit smaller screens”
Now the border is there and displaying on all devices the same way. That can be seen before an image is placed there.
The problem is with the display of that image. It just is not happening correctly. Setting the size of the screen does not help with this as I need the background image to display the same way on all device types. If you look at the following image, then what is being displayed on the laptop is the outside edge on the left and right side (the area I want displayed). But what is displayed on a mobile device is the central strip the same width as the dark central square. The result is that the stripes are horizontal on mobiles devices and vertical on the laptop. AND because that small section of the image is being blown up to fill the screen it is blurred and oversized.
Also, for some strange reason, the amount of magnification of the image varies on different pages on each mobile device
If my explanation does not make sense please view the site on a mobile device and a laptop.
Hope we can get this sorted :)
- This reply was modified 8 years, 1 month ago by amarie.
November 13, 2016 at 6:20 am in reply to: setting a Background image in Enfold Wedding Theme #711532Hi Andy,
In addition to the above issue I have now discovered that every page on the site displays the background differently. On some pages the image is blown up larger or smaller than the home page while on others it is the right size for the device.
Obviously I am wanting the background to appear the same on all devices and on all pages visited.
Hope you can assist with this :)
November 12, 2016 at 8:13 am in reply to: setting a Background image in Enfold Wedding Theme #711404Hi Andy, I have now used a test image that has concentric squares of different colours to see what part of the image is being utilised by the different media. The image can be seen at http://www.shauno.ca/gallery/contemporary/concentric-multi-color-01.jpg
On the laptop version the border showing equals the outside border of this image – orange to crimson – the outside 6 stripes. That is what I want to have happen.
However, on both the iphone and the ipad, the center of this image is being used as the border – that is the colours showing in the side theme border on both sides are clearly from the middle strip of the image!
How this can be, I dont know. But that is what is happening. Take a look – you can see it clearly
Can you assist with getting the outside edge of the image as the one being displayed on all devices?
Thanks
November 12, 2016 at 7:18 am in reply to: setting a Background image in Enfold Wedding Theme #711392Hi Andy, Thanks for your reply. I have adjusted the size of the image so that it now displays correctly on a laptop. Or at least on my macbook – I have not checked it on a windows device as yet. But that now means there was zero image showing in the margins for either an iphone or iPad (I dont have an android phone but assume its not working there either).
I tried various versions of the code from the page you provided the link for. Eventually, it occurred to me to try an all over pattern as that would HAVE to show (the image I was using had side borders). So, yeah, now images are showing. But again they are TOO huge and also blurry. If you check you will see how crummy it looks on mobiles (check on a laptop for how its supposed to look, please)
Like I say most people will be accessing the site using mobiles. This is basically the only thing holding up letting people know the site is ready and its fairly frustrating. We have admitted defeat on the parallax as it clearly is not going to work on ANY mobile. Very disappointing!!!
I don’t know why because I have seen other themes that have parallax components that work fine on mobiles. :( :(
Can we at least get this much to work?
So far it does not look like the theme works very well on mobiles at all :(November 9, 2016 at 11:46 am in reply to: setting a Background image in Enfold Wedding Theme #710177Hi Nikko, Thanks for the above code.
More importantly though, I need the background image to work on mobile devices the same way as it works on the laptop. The tick for responsive has a message saying that everything will be adjusted to fit smaller screens. But that does not seem to be happening – as you can see in the image I sent.
Can this be fixed? Because currently the mobile phone view is awful. The parallax is not working, the content is squeezed to a narrow window in the middle and the background image is so huge it does not display properly – just a random display of fuzzy colours down the side and for much of the side it is just white. Also, where the background image is fixed for the laptop version it scrolls on the phone version. Cannot see how to edit the theme to work on both types of devices.
Thanks for your help
PS: And yes, it is set to responsive in the general layout section :)
Hi Nikko,
Looks OK on website but completely does not work on a mobile. As most people will be accessing from mobile devices, I need it to work there as well.
Have attached a screen shot for you.
I now also see a big white space above the header for the menu icon. I would like to know how to get rid of that and have the menu icon show in the header. Can you please let me know where this can be set?
Thanks
Hi Ismael,
I am not sure how a screen shot will show its not working?The image shows OK but the parallax is not happening. What happens is that the image is fixed and scrolling is just like a normal site scroll – the page scrolls up but there is no parallax effect. All the content scrolls up together. On a laptop the content scrolls over the images set to parallax – a nice effect. On my Apple mobile devices, the images are fixed in place and all scroll up together – ie no parallax effect
A screen shot will not show that, I think
Added note: There is no need for the bottom of the image to be in the background but we would have to make the sides of the image repeat down the length of the page. Hope that makes sense :)
Hi Ismael,
My apologies for taking so long to reply. I have been waiting for my daughter to send the image whe wants used as the background. I have now attached the screen shot of the website now set to boxed layout. I knew it was set to stretched but figured there was no point in changing it as I did not see how to set the background image.
I have also added the background image which we want to set up around the sides and top of the site. Note that the image currently at the top of the site would be removed once the background image is in place. Its just there now to sort of show what it would look like.
Where it is currently black, we want there to be the image showing. Actually, need it to be wider than the black.
Can you let me know how to do it, or provide the code for that? Thanks for your help :)
Hi Rikard,
My apologies for the delay
Its http://www.flanagan-wedding.com
Also, you will notice the message: “would you like to share your location with this site” I think this is generated by the google map plugin. Do you know how I can turn it off?
Cheers
-
AuthorPosts