Contentful Post Backgrounds

So, I have mentioned before that Uptrennd allows inline-css basically what that means is it allows you to use styling attributes inside your HTML. Now the Froala editor Uptrennd uses is nifty, and considering the price tag it better be. It still sucks in some areas. It is not that it sucks at doing what it is intended for. It sucks at dealing with what it was maybe not intended for.

preview not availableSkip to how to add background colour

Whenever you change the color or font-size in the editor it adds these rules in the background. Whenever you upload an image and you see it is scaled already it has a rule that dictates that images scale.


Every new line, link and left, middle or right alignment adds a rule in the background. This is inline-css. Some of it can be done via pure HTML attributes such as the width and height of an image, but for real control you use CSS. To see an example of what I mean you need to click the code view button.


Since I am on a desktop the geniuses may have provided me with some options such as image upload which you do not have in your editor. Honestly, if you are suffering from the consequences of that in the Uptrennd editor I pity you and maybe everyone should finally make a post about why it is stupid to not have image upload on mobile?








What does this look like in code view and 



what does that have to do with CSS?



preview not available



The above image shows what the blue headline looks like in code view. The important part is the style="text-align:center;" and style="color:rgb(28,122,144);" attributes. 



These instruct the H2 tag which is a header element that it should be centered and the colour should be that specific blue which is represented as a RGB value. 



With CSS you can represent colours in a few ways, the RGB() method more useful when using it with opacity, making it the RGBA() method. Mostly you can opt for the Hex colour value that is one where the colour is represented in a hexadecimal fashion the blue of the title looks like this in hex: #1C7A90 and if you are using a pc you can add the colorzilla plugin to grab colours from any webpage, most design software will also provide this colour code, or use a colour picker 



So, the Uptrennd editor is nice. It nice for straightforward text and things that require no structure whatsoever. If you need anything more slap a Gif in and call it a day. If you still need more then you better get Googling or Duckduckgoing to find some generators, page builders and the likes. 




Adding a background colour or image.



Resources you can use:





Where to start. Almost all elements can have a background colour or image applied to it. For the most part, you want a background colour to cover a large area and for that reason, you want to wrap a bunch of elements inside a single element that then has that background.


If you look at the editor in code view you will notice that there are main <p></p>, <br>, <img/> and <span></span> elements for our own sanity we will introduce a new element one that is not visible, like <span></span> but is also a structural element for the document. We will be wrapping ALL contents inside one global <div></div> tag. For example's sake I have though added background and border styling to this paragraph tag <p></p> and the code for it looks like this:


<p style="background:#E4E5E3;padding:0.5em;margin:1em;color:rgb(51,51,51)">Content here</p>
To explain:We use the attribute on the element to instruct it that we wish to change something with CSS. Uptrennd does this also as we saw with font-size, font-family, colours etc.  Then we add the background: property and a Hexadecimal colour code. Then we add some padding all around to keep the contents away from the edges. Then we add margin all around the element to keep it way from other elements and change the font color to RGB(51,51,51) or to another hexadecimal colour code but because the 333333 repeats it can be simplified to only 333. Both the RGB() and Hexadecimal will translate into the same colour. The RGB if written out means out of a maximum value of 255 make Red - 51, Green - 51 and Blue - 51 this would translate to a dark grey because 000 means black and 255,255,255 is white. If all the values are equal you get grey tones.




To try and keep it all succinct I will just show an example of a background type with the CSS/HTML code used to accomplish it. Many of the examples will just use the easy to use generators I have linked above and the most basic styling which you can easily Google.








Solid Background Colour



As I showed above, the most basic is to just add a background colour. Choose wisely if you make it too dark and your text is dark it will not have enough contrast to be visible. If you do make a dark background you also need to then use a light colour for your text.



<div style="padding:0.5em;background-color:rgb(51,51,51)">Your content here</div>






Image background



The same principle of adding contrast counts for images if you intend to have text over that image, if it is a generic texture type image you might need to change very little. Many though like to use images of scenes and this is not a good idea unless you then separate the content from the background with a secondary background or text styling. The simplest is to just blur the image. You can use this background image generator site to quickly get the code to add and align your own images as background: Background Image Generator. If you do not have an image url, first upload an image to uptrennd and copy the SRC of the image from the code view or by selecting the image and copying the URL (image address).





<div style="padding:0.5em;background:url(https://loremflickr.com/600/600) no-repeat center center; background-size:cover;">Your content here</div>








Gradient Background Colour



This background gradient was generated by CSSGradient.io, for many of these styles you can easily find a website or tool to assist with the task of creating backgrounds using a visual interface. They will usuall provide you with CSS code which you then can copy and use as I show below:



<div style="padding:0.5em;background: linear-gradient(110deg, rgba(109,180,212,1) 0%, rgba(121,228,232,1) 27%, rgba(121,232,175,1) 69%, rgba(124,212,144,1) 100%);">Your content here</div>






Gradient over Image Background



Background styling can be stacked, this means from left to right you can have a solid colour, or gradient colour and a image background ontop of each other. For this example we use the exact gradient from before over the image background. The only parts that change is the RGBA(0,0,0,1) value. This means Reg, Green, Black and Alpha. From the code the Gradient generator gave you, you only need to change the last value RGBA(121,228,232,0.2) to below 0. This is a % value and 0.2 would mean 20% opacity. The more colours you have in the gradient you can adjust each to be more or less transparent by changing each Alpha value in the RGBA() method.





<div style="padding:0.5em; background:linear-gradient(110deg, rgba(109,180,212,0.2) 0%, rgba(121,228,232,0.2) 27%, rgba(121,232,175,0.3) 69%, rgba(124,212,144,0.6) 100%), url(https://loremflickr.com/600/600) no-repeat center center; background-size:cover;">Your content here</div>








CSS Stripes Generator



<div style="background-image: linear-gradient(14deg, #8ac1cc 23.81%, #c5e3e8 23.81%, #c5e3e8 47.62%, #80b8bd 47.62%, #80b8bd 50%, #8ac1cc 50%, #8ac1cc 73.81%, #c5e3e8 73.81%, #c5e3e8 97.62%, #80b8bd 97.62%, #80b8bd 100%);background-size: 173.61px 43.29px;"">Your Content Here</div>





CSS Background Patterns



<div style="background:linear-gradient(63deg, #999 23%, transparent 23%) 7px 0,linear-gradient(63deg, transparent 74%, #999 78%),linear-gradient(63deg, transparent 34%, #999 38%, #999 58%, transparent 62%),#444;background-size: 16px 48px;">Your Content Here</div>
*Not all of these patterns will work with Uptrennds editor







Background Textures



<div style="background:url(https://s3.us-east-2.amazonaws.com/uptrend/posts/1600372435-91661.png),#eee;background-size:cover;background-position:center;">Your Content Here</div>

This method would be similar to the image background, and the only difference is that the texture has transparancy which then causes the bottom chosen colour, in this case, a light grey (#eee) to show through. The transparent texture works best when it is grayscale and merely serves to add dark and light areas over a chosen colour. Again if you do not host images and textures yourself try uploading them to Uptrennd then using the image address of that image in the required code.





If all else fails. Then Google it.

COMMENT

26

Fola_Jay Ayo-Folorunso
17 Sep

Oh my my! Pen-bot you really did this! 

I have been so looking for how to learn how to do these background styling and Images and those I have asked have said they are still trying to perfect it... I wondered how long it will take them... Hahahahaha

But here you are with this gem of a post and I am super grateful! It will have to take a bit of practice to get used to them, but I love challenges and I sure will be spending enough time playing with these tomorrow till I get accustomed to them!

Thank you so so much Human bot! LOLOLOLOL

And If all else fails, all I am coming straight to you and not google

20

Sofs Su
17 Sep

Now  you've had the master class from the master himself!!

28

Princess Busayo
20 Sep

@Not Penderis, I really am grateful for this tutorial you listed here. Actually, @Sofs directed me here and I went through your post all through the night to try this out and I am so happy I tried the Gradient code and adding image to it. Thanks so much. Now I can show my pride on this. Hehehe 😄😄

20

Sofs Su
17 Sep

Thank you Buddy, you finally did it.. and how! Splendid!!!

You've far excelled all my expectations.. wow! wow! wow! Now I won't have people asking me to teach them, now that the master teacher has accepted my request and given us a masterclass. Low Whistle ... 

You've been amazingly patient and explained each of these desigsn so well.. Had you posted this one day earlier I wouldn't have wasted one whole day trying to learn how to do background images from Google LOL 

Thank you so much and hugs to you! 

I knew it was comming .. but this is a beautiful surprise!!

22

Wakygrace Shammah
17 Sep

I see you are already understanding this Ma. But it looks like it would take days before I get accustomed to this. Pardon me but I will still be among those few persons that will still come to you to ask for help and directions 😂🤭🤭

I can just bother someone like that, I hope you forgive me in future if I ever bring you my troubles. And thank you for nagging Pen to put this up for us @Sofs Su

20

Sofs Su
17 Sep

Hey, Latch on to Pen, he is the best teacher around, if he could teach a code ignorant fool like me he could take you places. 

19

Not Penderis
18 Sep

Ha learning is never a waste, by actually struggling to learn it yourself you have gained a lot more and will remember it far better than if I just kept giving you the solution. That is why problems are quite nice, sure you get the answer but along the way you gather enough info for multiple answers.

21

Roseberry A A
18 Sep

Omg! First of all, I hope I have permission to save this post because I have already.

Now, I always wonder how that background thing is done and I even thought of talking to Ismaheel about it but it keeps skipping my mind.

Thank you so much for this tutorial. Now I need some practicing to do.

21

aloha dreamer
18 Sep

Aloha Not!  Wow, this is a lot of information and knowledge to digest that will help everyone to create with more style and flair!

So I've already saved this post to enable me to be more creative.  Also, I've been a bit frustrated with using the centering because it doesn't work the way it used to.  But now I understand why and will try the info you've provided here:

"The above image shows what the blue headline looks like in code view. The important part is the style="text-align:center;" and style="color:rgb(28,122,144);" attributes. 

These instruct the H2 tag which is a header element that it should be centered and the colour should be that specific blue which is represented as a RGB value. "

Thank you!!

COMMUNITY DETAILS

Uptrennd

22044

Subscriber

1

Online

A platform designed to redistribute wealth from corporations to individuals. A site that empowers content creators to thrive through creating digital content.

RELATED COMMUNITIES

Bitcoin Cash

27659 subscribers

Litecoin

26981 subscribers

Cryptocurrency Mining

26150 subscribers

Trading & TA

23648 subscribers

Zcash

18825 subscribers

Uptrennd Optimization

15828 subscribers

© 2020 UpTrennd.com