QUICK NEWS

{NEW} - A new css video is up.

{OLD} - New video courtesy of Skhilled, Thanks for posting it up.

Video of the moment:


Internal Links

SMF Sites

Quick Info

Correctly adding a background image to Curve2?

Started by lurkalot, Apr 21, 2019, 04:20 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

lurkalot

Ok, I know there's various posts around showing how to add a background image, and that works pretty well.  But I'm wondering if theirs a definitive answer to the following questions.

Working on a copy of the 2.1 default theme Curve2

1: What's the correct way to add a background image to this theme? I want it centered, and so it doesn't repeat, and aligned top.

2: What's the optimal Image size for the background image to make it fit the various screen sizes?  (keeping it responsive) Will I need to use more than one image to achieve this, and if yes, how do I implement that? 

3: What's the best image format to use, PNG, jpg, other? Obviously the need to get the file size down is key, but also need to retain a certain image quality.

Tips and advice would be very much appreciated.

Bigguy

Well, I'm not sure what is proper but here is my css and how I did it:

background:url(https://www.smfhelper.com/smfhbg.jpg) #0C3E61;
background-attachment: fixed;
background-size: 100% 100%;
font: 83.33%/150% "Segoe UI", "Helvetica Neue", "Nimbus Sans L", Arial, "Liberation Sans", sans-serif;
color: #4d4d4d;
display: flex;
flex-direction: column;
min-height: 100vh;

My image is a jpg and ultimately it should be .png and as small in size as possible. I am going to change mine right now I think. This should help with initial load times.
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

live627

Actuality in the case of large sized backgrounds that never have transparency a jpeg is usually better because its compression can result in a smaller filesize. You can experiment with the compression depending in the desired  clarity.

Attached are the smfhbg images: the jpeg is four times smaller than the png. And progressive encoding is made for exactly this: https://www.liquidweb.com/kb/what-is-a-progressive-jpeg/

Bigguy

My mistake. Not sure what I was thinking but you are right. :emb
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

Bigguy

I have changed my background to .jpg I should have known this and probably got the two mixed up. :emb
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

LandyVlad

Which is a good time to mention that the SMFH site background is the BEST I've seen on any forum anywhere.
Please do not PM me with questions on astrophysics or theology.  You will get better and faster responses by asking homeless people in the street. Thank you.