Block of grey at the end of my page

jpommier

Hello,

I've been building a website for my upcoming wedding. On the homepage, I have some artwork I did and I wanted it featured on the entirety of the browser, so I went with the Cabernet theme. Originally, my image was cut off at the bottom and it wouldn't let me scroll to see the full length of the image. So I tried to cheat and added a bunch of empty text space so it would allow for scrolling. The problem is that this cheat means there is a lot grey space depending on the font settings of someones browser and a lot of the grey space shows up on the Ipads. It's not a big deal, but I would definitely like it to look right.

I used the following code in the CSS Header:


html {
background-image: url(%resource(Wedding-Poster_PNG-24_1944x2592_ver2.png)%);
}

I was hoping there was a way to let the scroll length correspond with the height of the image I'm using as the background. Here is the link to my website:

jaimejeremy2012.com/

Any and all help would be greatly appreciated.

Thanks!

jpommier

And by the way, I'm a complete idiot when it comes to web stuff...

Aaron Marquez

Try using this code in Page Info > Header > CSS:

html, body {height: 1400px !important; }

Adjust it as needed.

jpommier

Aaron, thank you for the help. I tried putting in the code you so kindly recommended, so my CSS Header looks like this:


html {
background-image: url(%resource(Wedding-Poster_PNG-24_1944x2592_ver2.png)%);
}

html, body {height: 2000px !important; }


I chose a pixel height that looked good on my macbook but it was still cutting off on my pc browsers. I added in some lines of empty text and it looks very similar from on my macbook in safari and on my pc in Firefox and Chrome. However, the grey blocks come back if I try to change the browser window dimensions and the background image is not reacting to the changes. I will have to check to see how it looks on my fiances Ipad. This is already a vast improvement but just shooting for the moon, I was hoping to achieve something like what is shown on this page for the Cabernet 2 theme:

onelittledesigner.com/cabernet2/styled-5/styled-8/index.html

I was hoping to have the ability to scroll the whole background image but retain the reactive qualities without the blocks or text going across. I apologize for my ignorance in these matters. Again, thank you immensely for your help so far.

jpommier

Anyone have any advice?

Aaron Marquez

@jpommier, sorry, didn't know you responded.

So my "solution" didn't work at all?

jpommier

Not quite. It cuts off in some browsers but looks good in others. And on Ipads it has a lot of grey space still. I tried adding in, using the code you gave, the height and width of my image just to see what that did. It made the image reactive to how I change the browser and it looked good on ipads but then in some browsers it was cutting off the side because it was making the image too large.

jpommier

I have this under Header > CSS


html {
background-image: url(%resource(Wedding-Poster_PNG-24_1944x2592_ver2.png)%);
}

html, body {width: 1944px height: 2592px !important; }


I also have the content width set to 80% (no sidebar). So far this seems to look the best. I still get some grey space but only with Firefox on my macbook. Not sure about ipad.