• 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
  • Paul Clapham
  • Ron McLeod
  • Bear Bibeault
  • Liutauras Vilda
Sheriffs:
  • Jeanne Boyarsky
  • Junilu Lacar
  • Henry Wong
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Jj Roberts
  • Tim Holloway
  • Piet Souris
Bartenders:
  • Himai Minh
  • Carey Brown
  • salvin francis

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: 26090
71
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.
 
Marshal
Posts: 67478
173
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: 12481
269
  • 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: 6698
161
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?
 
Don't get me started about those stupid light bulbs.
reply
    Bookmark Topic Watch Topic
  • New Topic