QUICK NEWS

{NEW} - A new tutorial for Github is ready for your veiwing in the articles section.

{OLD} -New boards have been introduced. Stop on in and check it out.

Video of the week


Internal Links

SMF Sites

Quick Info

Correctly adding a background image to Curve2?

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

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

lurkalot

Apr 21, 2019, 05:20 AM Last Edit: Apr 21, 2019, 05:30 AM by 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.

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

Bigguy

I have changed my background to .jpg I should have known this and probably got the two mixed up. :emb

LandyVlad

Which is a good time to mention that the SMFH site background is the BEST I've seen on any forum anywhere.
I reject your reality, and substitute my own.