Member Avatar for peter20

Hi ,
I would like to make a header in a site joining images but I would like the transition from one to another to be smooth ...

How can I do this ?? Is there online header generator uploading images..

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

And finally I search a free template for a church site. Do you a site like this ?

Thanks in advance

  • 6 Contributors
  • 7 Replies
  • 193 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by brylle

Dani AI

Generated

Two reliable ways to get a smooth, “transparent” join between header images: 1) pre-compose the images in an editor so the seam is feathered and exported as a single asset, or 2) keep images as separate elements and blend their edges in the browser with masks/SVG/canvas. As clarified, you want the join to look soft rather than a hard line. That’s different from layout/spacing (as asked) and is why and suggested an editor-based approach.

Editor workflow (best compatibility)

  • Open both images as layers in a graphics editor (GIMP or Paint.NET work fine).
  • Align layers, add a layer mask to the top layer, then paint a black-to-white linear gradient on the mask across the seam to feather it.
  • Tweak color/exposure near the join so tones match, then export a high-resolution PNG or JPG. Use multiple sizes or srcset for responsive displays.

Quick CSS example for a single exported header:

.header {
  height: 240px;
  background-image: url('header-blend.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

In-browser blending (responsive, editable)

  • Place the two images stacked and apply CSS masks (or SVG masks) to fade their inner edges:
    
<div class="header">
<img class="left" src="left.jpg" alt="">
<img class="right" src="right.jpg" alt="">
</div>

.header img { position: absolute; top: 0; height: 100%; }
.left {
-webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to right, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
}
.right {
-webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to left, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
}


Note: `mask-image` works in modern browsers; provide the pre-composited image as a fallback for older clients.

Practical tips: use a 10–20% overlap for the feather area, match exposure/color at the edges before blending, and export larger images for retina with `srcset`. For free church templates, look for responsive themes (WordPress.org or Bootstrap-based templates) that include sermon/audio, event calendar and donation features rather than a purely decorative layout.

Recommended Answers

All 7 Replies

Member Avatar for JorgeM

Do you mean that you have spaces between your images, or that they are stacking on top of each other? Please carify.

You can control the placement of your images by using styles such as margin:0;padding:0 as well as postion:absolute/relative, left and top, etc...

Member Avatar for peter20

I am sorry I don't speak English so good.
I would like in the line where the two images are connecting to be like transparent ..

to be the transition more physical ..

Member Avatar for ganyian

Is your question, how to make one header out of multiple images, but in the end they act as one image? That would be a Photoshop or other image editing solution.

Your question is so unclear that it is un-answerable!

Member Avatar for Member #46692

Yeah sounds like a photoshop question to me.

Member Avatar for ome2012

you can use a free imageslider....

Member Avatar for brylle

you can use marquee :)

Member Avatar for brylle

this might help you.. Goodluck!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.