• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Liutauras Vilda
  • Jeanne Boyarsky
  • Devaka Cooray
  • Paul Clapham
Sheriffs:
  • Tim Cooke
  • Knute Snortum
  • Bear Bibeault
Saloon Keepers:
  • Ron McLeod
  • Tim Moores
  • Stephan van Hulst
  • Piet Souris
  • Ganesh Patekar
Bartenders:
  • Frits Walraven
  • Carey Brown
  • Tim Holloway

direct reference to base64 data for background image

 
Greenhorn
Posts: 3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
having trouble with syntax, presumingly this is possible

<html>
<head>
<style>
.bottle {
           width: 290px;
           height: 163px;
           background: url("properly formatted base64 string here" ) no-repeat;
       }
</style>

</head>
<body>

<h1> over eight billion tons of plastic have been produced since the 1950s </h1>


<div class="bottle"/>
would like to control location of this [ or any other ] base 64 image in background  with CSS



</body>
</html>
 
Marshal
Posts: 24594
55
Eclipse IDE Firefox Browser MySQL Database
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
The image you use is going to be on the network somewhere, quite possibly it comes from the same server as the CSS and the HTML. Although it could conceivably come from some other site. You need to provide the URL which points to that image, which you would do just the same as if you used an tag in the HTML.

I don't know what a "base 64 image" is. Normally you'd use a JPG or some other image type supported by your browser.
 
Sheriff
Posts: 67266
170
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
A base64 image is a protocol that allows the image data ( encoded as a base64 string) to be directly placed within the html as the image source rather than as a separate file.

I do not know if there is a way to use such an image as a background image.

If not, I’d use css to absolutely position the image behind anything that should overlay it.
 
Saloon Keeper
Posts: 10308
217
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Do you mean embedding the image in the CSS?

https://css-tricks.com/data-uris/
 
Tomswell Robinson
Greenhorn
Posts: 3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
yes indeed CSS Tricks ..... embedded base64 background !
just can't get syntax correct.
 
Saloon Keeper
Posts: 5573
144
Android Mac OS X Firefox Browser VI Editor Tomcat Server Safari
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
What do you have right now?
 
It is sorta covered in the JavaRanch Style Guide.
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!