Member Avatar for siva28

hi everyone..

now i developin own site..

is a site home page having one wallpaper(background image)with that person name has been displayed transparent...

how to do that..please refer that site...i attracted that design...

please reply with solution

  • 3 Contributors
  • 3 Replies
  • 119 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by jcarbillon

Dani AI

Generated

Practical, up-front plan to recreate that wallpaper homepage with a transparent-name effect (as asked). is correct that an image editor belongs in the workflow to crop/grade/optimize the photo, and 's UX concern about vertical scroll matters — a full-viewport hero can look great while keeping normal scrolling for content below.

Key idea: put the photo in a full-viewport hero and render the name on top with one of two approaches — a readable overlay (simple, robust) or a “knockout” / cut-out text that reveals the photo through the letters (fancier; needs either CSS background-clip or SVG masking).

Example — full-viewport hero with an overlay for contrast:

<div class="hero" role="banner" aria-label="Hero">
  <h1 class="site-name">Person Name</h1>
</div>
.hero {
  background-image: url('/images/hero.jpg');
  background-size: cover;
  background-position: center;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}
.site-name {
  position: relative;
  color: rgba(255,255,255,0.95);
  font-size: clamp(2rem, 8vw, 6rem);
  z-index: 1;
}

For a true cut-out (transparent) text effect, either use -webkit-background-clip: text with -webkit-text-fill-color: transparent (works well in modern WebKit/Blink browsers) or create an SVG mask for broader compatibility.

Practical tips: export a web-optimised JPEG/WebP and a 2x version for retina; keep the site-name as real text (<h1>) for SEO and screen readers; ensure contrast/readability (use a semi-opaque overlay when needed); avoid disabling page scroll — let the hero fill the viewport but allow users to continue to content. If mobile 100vh quirks appear, use min-height:100vh or set a JS-derived --vh CSS variable to match the viewport height.

Recommended Answers

All 3 Replies

Member Avatar for tobik999

solution to what? I dont get it. I do not know if a vertical scroll bar in your portfolio is that user friendly.

Member Avatar for siva28

i need solution for front site design thats home page design ,which tool has been used to develop that..

please reply..

Member Avatar for jcarbillon

use photoshop

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.