Member Avatar for vsikariam

Hello to evreyone, this is my first post,
I create this topic in case to write down some question i have during a project i made right now, may is simple question but this will help me to learn the HTML and PHP language.

My question i want to add an image behind objects. Like on Facebook there is a blue color image behind the login items. How can i add an image behind a textbox?
Thanks.

  • 3 Contributors
  • 2 Replies
  • 67 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

asked how to place an image behind form controls. s suggestion to use a container element is valid, and is right that the effect is handled by CSS (a background image or a CSS gradient). A more robust pattern is to keep markup semantic and put the visual decoration in CSS — either on the wrapper or via a decorative pseudo-element — so the form structure and styles stay separate and responsive.

A compact, maintainable approach:

.form-wrap { position: relative; overflow: hidden; }

.form-wrap::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: url('/path/to/background.jpg') center/cover no-repeat;
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}

.form-wrap > * { position: relative; z-index: 1; }

input { background: transparent; border: 1px solid rgba(0,0,0,0.15); }

Practical notes: prefer external CSS over inline styles; use background-size: cover or CSS gradients for scalable visuals; set pointer-events: none on decorative layers so inputs remain clickable; make inputs readable (semi-opaque backgrounds or sufficient contrast). For accessibility, decorative images belong in CSS; images that convey content should be <img> with alt. For dynamic paths, PHP can output the image URL, but sanitize and escape output to prevent XSS. Optimize assets (size, format, and high-DPI variants) and test on small screens to ensure the layout and touch behavior remain usable.

Recommended Answers

All 2 Replies

Member Avatar for makman99

Use the <div> tag.

<div style="background-image:url(LINK_TO_IMAGE);width:WIDTH_OF_IMAGE;height:HEIGHT_OF_IMAGE">
<input_here>
</div>
Edited by makman99 because: n/a
Member Avatar for almostbob

its not an image, its a css style

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.