Home » Uncategories » How to Add a Image to the Private Blog Login Page Updated FREE

How to Add a Image to the Private Blog Login Page Updated FREE

How to Add a Image to the Private Blog Login Page

Image overlay is the technique of adding text or images over another base paradigm. One of the simplest ways to add together image or text overlay is using CSS backdrop and pseudo-elements.

In short, CSS overlay effects are accomplished by using the following:

groundwork-paradigm and background CSS properties to add epitome and linear-slope overlay effect.
position:absolute, top, bottom, right, left CSS backdrop to command the position of overlay image or text.
::afterwards and ::before CSS pseudo-elements forth with content CSS property to control the content in case of text overlay.

Here is an excellent instance of overlay effect from the Airbnb website.

In the to a higher place instance, ii text snippets (The Greatest Outdoors and Wishlist curated by Airbnb) and one CTA (Get inspired) were added on top of a base paradigm.

In this post, we will learn how to create like image overlay effects.

There are 2 types of overlay:

Paradigm overlay - Calculation prototype over an paradigm, e.g., watermarked images where you see a logo on top of an image.
Text overlay - Adding text over an image, e.grand., hero images, marketing banners like to a higher place Airbnb example.

More specifically, we will talk about two techniques to create epitome overlay:

Text and image overlay using CSS
We volition encompass examples and code of how to add text overlay and epitome overlay using CSS. You tin can employ these techniques on your website past copy-pasting code snippets provided in this mail.

? This method is easy to understand and use.

? If the user downloads the epitome, they won't run across the overlay effects.

? You will have to write separate code for desktop, mobile, iOS, and Android applications.

Quick links:
→ Text overlay examples
→ Prototype overlay examples
(Recommended) Text overlay, image overlay, and visual effects using ImageKit.io
Hither nosotros volition talk nigh how to simplify text and image overlay generation. We will create visual furnishings only by changing URL parameters, i.due east., src of image.

This will allow you to utilize the same image across desktop, mobile, iOS, and Android applications. Yous won't accept to write extra markup or code to reach overlay furnishings in different platforms.

? Pre-generated images are rendered speedily on the client side.

? The aforementioned epitome URL works on mobile, desktop, iOS, and Android app.

? Not as powerful as native CSS and HTML but good for 90% employ-case.

Quick links:
→ Elementary text overlay using ImageKit.io
→ E-commerce product images labels
→ Watermark images
→ Dynamic marketing banners

Text overlay effects using CSS

Text overlay using a vanilla div element

We will add together a text on elevation of the post-obit base of operations paradigm:

https://ik.imagekit.io/ikmedia/accessories_banner.jpg?tr=w-1200,h-400

tr=w-1200,h-400 is used to resize the paradigm for this instance using ImageKit.io.

We will add a text in the div element with grade overlay. This is useful if the text is dynamic and coming from the backend as part of the initial HTML.

The HTML will look like:

              <div course="example">   <img  class="groundwork-epitome" src="https://ik.imagekit.io/ikmedia/accessories_banner.jpg?tr=due west-1200,h-400">   <div course="overlay">     Multi-line <br/>text   </div> </div>

We desire this text to be placed on height of the image. Let's set the positive:absolute for div with grade proper noun overlay. And use top and correct CSS property to command the position of this overlay text relative to the background epitome. The final CSS looks like this:

              .example img {   width: 100%;   position: relative; }  .example .overlay {   position: absolute;   pinnacle: 80px;   correct: 15px;   font-weight: bold;   text-align: right;   font-size: 30px; }

The final effect:

Text overlay using CSS pseudo-chemical element

We can too employ ::later on or ::before CSS pseudo-elements instead of creating a new div chemical element. This means all the text will be stored in the CSS only. This solution is helpful if you want to overlay a fixed fix of labels in multiple places on the website.

Prototype overlay effects using CSS

Just like nosotros added text on top of images, we can also add images over other images using native CSS backdrop.

Image gradient overlay effect

The gradient overlay effect is i of the commonly used overlay effects that you volition see on landing pages.

Let'due south create the hero department of a landing page using the post-obit hero image as background.

https://ik.imagekit.io/ikmedia/blog/hero-image.jpeg

The HTML looks like:

              <header>     <department class='hero-header'>         <h1>Hero title</h1>         <h2>Another landing page</h2>         <button>Sign-up</button>     </section> </header>

Nosotros volition use the groundwork CSS holding to create a linear gradient overlay issue over an image.

              header {     meridian: 400px;     width: 100%;     text-align: center;     padding-top: 100px;     color: white;     overflow: hidden;     background: #C04848;  /* fallback for sometime browsers */     background: linear-slope(rgb(72,0,72,0.viii), rgb(192,72,72,0.8)), url("https://ik.imagekit.io/ikmedia/weblog/hero-image.jpeg");  /* Chrome ten-25, Safari v.1-6 */     background: linear-gradient(rgb(72,0,72,0.viii), rgb(192,72,72,0.8)), url("https://ik.imagekit.io/ikmedia/weblog/hero-epitome.jpeg"); /* W3C, IE x+/ Border, Firefox sixteen+, Chrome 26+, Opera 12+, Safari 7+ */     background-size: cover;     background-echo: no-repeat; }

This volition create a beautiful gradient overlay effect that you can utilise on your landing pages.

If you are looking for more awesome images consequence check out our guide on CSS Image Furnishings to blast your images!

Downsides of CSS image overlay using CSS

While creating epitome and text overlay effects using native CSS is pretty like shooting fish in a barrel, it has some downsides.

If the user saves the image or opens it in a new tab, they won't see the text or epitome that y'all added using CSS.
Yous will have to write extra markup to generate these effects.
The same code won't piece of work for iOS and Android.

To overcome these problems, you lot can generate text and prototype overlay using an image CDN like ImageKit.io.

Overlay using ImageKit.io

ImageKit.io is an image CDN that allows you to resize, crop, rotate, change prototype format, add text, and image overlay using URL parameters. It also takes care of paradigm optimization and serving avails using a global CDN.

You lot will need an ImageKit.io business relationship to generate text and paradigm overlays. Create a free account on ImageKit.io if yous don't already have one. ImageKit.io offers a generous free programme that gives you upwardly to 20GB of bandwidth, absolutely Costless, every calendar month!

Let's swoop into some examples.

Elementary text overlay using ImageKit.io

Original paradigm URL:
https://ik.imagekit.io/demo/medium_cafe_B1iTdD0C.jpg

Now,

Let's add a text overlays made easy with font size 45px and black color #000000. We will use ot-overlays made easy,ots-45,otc-000000 parameter in the URL.
With a transparent white background i.e. #FFFFFF80. We will add otbg-FFFFF80 parameter in the URL.
With padding of 40px using otp-forty parameter.

The concluding URL becomes:
https://ik.imagekit.io/demo/medium_cafe_B1iTdD0C.jpg?tr=ot-overlays made piece of cake,ots-45,otc-000000,otbg-FFFFFF80,otp-40

The outcome image:

In this blog, we will encompass a few examples. But you tin learn about all the parameters from the text overlay documentation.

E-commerce utilise-case

You will often see specific promotional or data labels on the production image on an e-commerce website like this.

With ImageKit text overlay, information technology is pretty piece of cake to create such images.

For example, the product paradigm URL is:
https://ik.imagekit.io/ikmedia/hoodie_white.png

Now, we want to add a fifteen% OFF label with a solid colour background.

The last URL becomes:
https://ik.imagekit.io/ikmedia/hoodie_white.png?tr=westward-394,h-540,ot-15% OFF,otc-FFFFFF,otbg-EF6823,or-4,otp-8_8,ox-x,oy-ten,ott-bold,ots-30

You lot can use this URL in mobile, desktop, iOS, and Android applications, and the result will look the same.

Let'south understand the unlike parts of this URL i past i:

w-394,h-540 is basically resizing paradigm to 394x540 dimension.
ot-fifteen% OFF is calculation xv% OFF text on the epitome.
otc-FFFFFF is setting the color of text overlay to white.
otbg-EF6823 is setting background color to #EF6823.
or-iv is used to set up the border-radius of the background to 4px.
otp-8_8 is for setting top-bottom and left-correct padding to 8px.
ox and oy are used to control the position of text overlay relative to background image.
ott and ots are used to control the font typography and size.

The resulting image:

Watermark images

Let's say the base image URL is - https://ik.imagekit.io/demo/medium_cafe_B1iTdD0C.jpg

Overlay image logo URL is:
https://ik.imagekit.io/demo/logo-white_SJwqB4Nfe.png

Now to overlay this logo over the base of operations image we will laissez passer the path of overlay image in oi parameter i.east. logo-white_SJwqB4Nfe.png.

Final URL:
https://ik.imagekit.io/demo/medium_cafe_B1iTdD0C.jpg?tr=oi-logo-white_SJwqB4Nfe.png

Y'all can besides command the position, width, and other attributes of the overlay prototype, all using URL parameters. Larn more from the image overlay documentation.

To control the position of the overlay image relative to the groundwork image, we can employ ofo parameter. ofo parameter accepts relative position values i.eastward. top, correct, bottom, left, etc.

Top position:
https://ik.imagekit.io/demo/medium_cafe_B1iTdD0C.jpg?tr=oi-logo-white_SJwqB4Nfe.png,ofo-top

Y'all can use a combination of image watermarks and text overlays to create irresistible personalized banners for users.

Example one:
https://ik.imagekit.io/ikmedia/accessories_banner.jpg?tr=due west-1200,h-400:obg-F8F8F6,oh-176,ow-234,or-88,ox-753,oy-165:otf-PlayfairDisplay-Bold.ttf,ot-HI JOHN,,otc-0450D5,ots-24,ox-850,oy-120:otf-PlayfairDisplay-Bold.ttf,ot-Epic FASHION,ots-36,ox-850,oy-158:otf-PlayfairDisplay-Bold.ttf,ot-Auction,ots-104,ox-850,oy-190:otf-PlayfairDisplay-Bold.ttf,ot-two DAYS TO Go,ots-38,ox-850,oy-294

Case 2:
https://ik.imagekit.io/ikmedia/white-sail.png?tr=westward-g,h-667:oi-site_graphics/girl_in_white_500.jpg,ow-500,oh-667,ox-0,oy-0:oi-site_graphics/guy_in_yellow_500.jpg,ow-500,oh-667,ox-500,oy-0:ot-How-do-you-do%20JOHN%E2%lxxx%9A%20HERE%20ARE%20SOME%20RECOMMENDED%20PRODUCTS%20FOR%20YOU,otbg-FFFFFF80,otp-20,ots-30,otc-000000,ott-b,or-16,ox-15,oy-550

Photo collage

Y'all can combine multiple photos together and create a cute dynamic collage.

Example:
https://ik.imagekit.io/ikmedia/white-canvas.png?tr=westward-1245,h-1245:oi-women-apparel-1.jpg,ox-0,oy-0,ow-600,oh-600,oib-15_FFFFFF:oi-women-apparel-2.jpg,ox-615,oy-0,ow-600,oh-600,oib-15_FFFFFF:oi-women-dress-3.jpg,ox-0,oy-615,ow-600,oh-600,oib-15_FFFFFF:oi-women-dress-4.jpg,ox-615,oy-615,ow-600,oh-600,oib-15_FFFFFF:ot-Women%27s%20Clothing,otbg-00000080,otp-xx,ots-60,otc-FFFFFF:b-2_000000

You tin cheque out how to create a photo collage tutorial to learn more.

Summary

It is easy to create epitome and text overlay using native CSS. You can copy-paste the code from the above examples and beginning using them right away.
Although CSS is powerful, creating overlay effects using CSS has some limitations, e.one thousand., the same code doesn't work for all devices, and if the user downloads the image, the overlay outcome is lost.
Using an Paradigm CDN like ImageKit.io simplifies the text and paradigm overlay generation.
You can create a free account and starting time creating beautiful visuals dynamically using URL-parameters.
Setting upwardly ImageKit only takes a few minutes. You lot can integrate your existing storage or whatsoever web server with a few clicks.

How to Add a Image to the Private Blog Login Page Updated FREE