setting a Background image in Enfold Wedding Theme

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 :)

PS: And yes, it is set to responsive in the general layout section :)

Hi 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

Hi 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 :(

Hi 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 :)

Hi 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.

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:

and
http://www.css3.info/preview/background-size/