Member Avatar for ypks_destiny

i want to get a data on image by using <img> tag can any one sortr this out

  • 4 Contributors
  • 5 Replies
  • 124 Views
  • 3 Months Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Summary and focused fixes (short and practical)

The image tiles because by default backgrounds repeat and your page was using a local filesystem path. Use CSS to set a non-repeating, scaled background and serve the image from the web site (not a C:\ path). The body/background HTML attribute is obsolete — prefer CSS.

Practical CSS (adjust the URL and dimensions to match your site)

body {
  background-image: url('/path/to/images/winter.gif');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover; /* use contain or 100% 100% if you prefer different scaling */
  min-height: 800px; /* ensure there is space for the background to fill */
}

To place form fields on top of a decorative image, put the image on a container and position the form inside it so inputs stay clickable and accessible:

.container {
  width: 1000px;
  height: 800px;
  background: url('/path/to/images/winter.gif') no-repeat center top;
  background-size: contain; /* or cover */
  position: relative;
}
.container form { position: absolute; left: 120px; top: 200px; }

Notes, cautions and tying back to existing replies

  • was correct that a canvas can give you a base64 data URL, but be aware of same-origin/CORS restrictions: cross-origin images will taint the canvas and prevent toDataURL use unless the server sets appropriate CORS headers (CORS-enabled images and toDataURL).
  • ’s <img> suggestion works as a quick fallback, but using CSS backgrounds is cleaner for decorative artwork and avoids layout/accessibility problems.
  • Use a reasonably large source image for backgrounds; scaling a tiny GIF up will look blurry or distorted. For responsive layouts, favor background-size: cover or use media queries to swap images.

Recommended Answers

All 5 Replies

Member Avatar for Lourdupinto

can you elaborate your question please....

Member Avatar for Lourdupinto

If you want to get as tool tip

<img src="path" alt="click me"/>

or

<img src="path" title="Click me"/>

Member Avatar for ypks_destiny

I am having a registration form in html..i want registration page in a IMAGE..I tried using

<body background="C:\Documents and Settings\Prashanth.yatakeeri\Desktop\Winter.gif" WIDTH="1000" HEIGHT="800">

this but the image is coming in four parts as the image is small..i tried using width and height also but its not working...

Edited by ypks_destiny because: n/a
Member Avatar for pmallik

You will need to create a canvas element with the correct dimensions and copy the image data with the drawImage function. Then you can use the toDataURL function to get a data: url that has the base-64 encoded image.

It would be something like this. I've never written a Greasemonkey script, so you might need to adjust the code to run in that environment.

function getBase64Image(img) {
    // Create an empty canvas element
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    // Copy the image contents to the canvas
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    // Get the data-URL formatted image
    // Firefox supports PNG and JPEG. You could check img.src to
    // guess the original format, but be aware the using "image/jpg"
    // will re-encode the image.
    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
Edited by Ezzaral because: Added code tags. Please use them to format any code that you post.
Member Avatar for almostbob 
<body><img src='C:\Documents%20and%20Settings\Prashanth.yatakeeri\Desktop\Winter.gif' width='100%' style='z-index:-1;' alt=''>

excusing inline style, get it out into css where it belongs

Edited by almostbob because: n/a
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.