Background to fit page

Miss Lemon
Administrator

Swinging on a vine looking for that ever elusive creature.

Posts: 581

Background to fit page Jul 19, 2016 16:44:50 GMT

Quote

Post by Miss Lemon on Jul 19, 2016 16:44:50 GMT

Background to fit page
support.proboards.com/thread/551162/background-fit-page

TUMBLEWEED's post. Check to see if this is the one I'm using.

the bottom of style sheet

body {
background: #050605 url('http://i60.tinypic.com/2wd6kaw.png') no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
}

I can also change that last line to say scroll if I want.

obviously, put in my own image.

Last Edit: Jul 19, 2016 17:01:53 GMT by Miss Lemon

Time to bake some Lemon cake.

[imgsrc="https://images2.imgbox.com/ce/53/kQz3FXPi_o.gif"/]

Miss Lemon
Administrator

Swinging on a vine looking for that ever elusive creature.

Posts: 581

Background to fit page Jul 22, 2016 17:17:00 GMT

Quote

Post by Miss Lemon on Jul 22, 2016 17:17:00 GMT

OK DON"T USE ABOVE CODE!!!!!!!!!!!!!!!!!!!!!!

It's not going to hurt anything, but it's just not going to look right. (My issues from before were conflicting with what I had already placed in the visual editor screen of admin panel.)

Use this instead:

body {
background-size: cover;}

Do any editing on the regular visual editor screen.

ex: image links

if I want repeats or what not... I need to go check out how this looks. I would think with repeats, I would NOT USE THIS CODE AT ALL.

=====================================

REMEMBER, if the image is square (and I might want for it to scroll down) it's going to want to cut off bottom if it's a very large image.

better to use a wide screen shaped image (check out screen resolution size chart)

pb and sw

((( EDITED to add: I got this to work right on my laptop with this code but it still has problems with the ipad/iPhone when I use the collapsible category plugin. ))))

Last Edit: Jul 29, 2016 2:52:17 GMT by Miss Lemon

Time to bake some Lemon cake.

[imgsrc="https://images2.imgbox.com/ce/53/kQz3FXPi_o.gif"/]

Miss Lemon
Administrator

Swinging on a vine looking for that ever elusive creature.

Posts: 581

Background to fit page Jul 29, 2016 2:43:35 GMT

Quote

Post by Miss Lemon on Jul 29, 2016 2:43:35 GMT

skidjit.proboards.com/thread/1212/ecstatic-make-background-image-screen?page=1&scrollTo=3988

for more info: sw thread

BELOW IS WHAT I SAVED ON THIS LINK TO SW.......

OK I had to post that it worked well for my laptop. Nothing resized when I used the collapsible category plugin.

BUT it did resize the background image when I looked using my phone. This is what Kami said to do.

Jul 22, 2016 18:07:10 GMT @kamiyakaoru said:

Not particularly. I'm not too familiar with this particular CSS (mainly because I now tend to use tiling backgrounds) but it is my understanding that a media query would allow you to change the behavior of the CSS you specify based on the size of the viewport. Try the following:

@media only screen and (max-width: 767px) { body { /* This background image is for smaller screens */ background-image: url(url here); } }

Replace the red text with the image you want to display at a certain size, and the blue text with the maximum size you want the alternate image to display at (anything larger will display the "normal" background.

You can also add any other behaviours to this CSS, including 'cover' and setting the image scroll to 'fixed'. Just append any other CSS after the ; of the background image line.

If it were me I'd make the width 750px as that is the resolution for the iPhone 6 which according to statistics seems to be the most commonly used device, but it's up to you -- check the site I have you earlier to see the background behaviour based on the size of the mobile screen and adjust the max width accordingly.

Hope this helps!

Last Edit: Jul 29, 2016 3:06:25 GMT by Miss Lemon

Time to bake some Lemon cake.

[imgsrc="https://images2.imgbox.com/ce/53/kQz3FXPi_o.gif"/]

Lemon Cake

Background to fit page

Post by Miss Lemon on Jul 19, 2016 16:44:50 GMT

Post by Miss Lemon on Jul 22, 2016 17:17:00 GMT

Post by Miss Lemon on Jul 29, 2016 2:43:35 GMT

Quick Reply