Background
I am allowing user to upload an image inside mask image....
Once user upload image, I am filling user uploaded image inside mask image :
1.Mask image :
2.user uploaded image :
3.User uploaded image on mask [Final image ] :
Codepen : https://codepen.io/kidsdial2/pen/OdyemQ
JSfiddle : http://jsfiddle.net/2xq8p0zy/
Html
<body>
<img src="http://139.59.24.243/images/invitations/birthday/a.jpg" alt="">
</body>
css
body {
background-color: #111;
color: #555;
font-size: 1.1em;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
img {
margin: 20px auto;
display: block;
width: 100%;
height: 500px;
-webkit-mask-image: url(http://139.59.24.243/images/invitations/birthday/ice.png);
mask-image: url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/mask-image/mask-image.png);
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
Requirement:
I want to give an option to move the user uploaded image inside mask image as in this fiddle :
http://jsfiddle.net/aLcb4sb5/ or link
Issue :
but currenly in website both images are moving....
I made a few changes to your design. its a small change to the html and css.
The new html layout is like this
<div class="image-holder">
<img src="https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg" alt="">
</div>
where image-holder div is the mask image and the image inside it, is the user uploaded image
I made a demo have a look here
Note for draggable to work you need jQuery.ui installed, and I think that you already using it in your site.
Please remove below CSS code from .photo_holder img and write on .photo_holde. Like this:
.photo_holde {
-webkit-mask-image: url(http://139.59.24.243/images/invitations/birthday/ice.png);
mask-image: url(http://139.59.24.243/images/invitations/birthday/ice.png);
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
I used the uploaded image as background image of a div, then moved the background position according to the move drag. The initial position is set to "0px 0px".
Written in pure JS, You probably can make it shorter if you choose to use a JS library that handles the drag.
<div id="draggable" draggable="true" style="background-position: 0px 0px;"></div>
Example here
You need the image to be draggable so
first we need a container for it to be wrapper to listen to the dragover event
and listen to the dragstart event on the image itself
hence we able to calculate the drag distance and apply it as css translation
Please check the following pen i've forked it from yours and apply the changes also
I've added listen to onwheel event and apply zoom in and zoom out for the image and on same way
I recommend you to apply flip horizontal and flip vertical and image rotation
enter code here
https://codepen.io/anon/pen/yZVPrp
check this link out, might help you. What you want is called a "Clipping Mask".
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing#Clipping_paths
EDIT: Here's some magic. You're welcome!
Codepen: https://codepen.io/anon/pen/zeZMLz
Related
I am new to JS and I'm making a game in HTML5/JS, and I need to set a background image for a div that is nested in another div, without overflow. I put the background-image property on the element, but the background is not appearing.
I haven't been able to find any other examples of this online, or how to fix it. The background-image property is showing up in the browser, and the file paths are correct.
HTML:
<div>
<div id="DivId" class="DivClass">
</div>
</div>
CSS:
.DivClass {
background-color: rgba(20, 20, 20, 0.75);
background-repeat:no-repeat;
background-size:47%;
background-position: center;
background-repeat: no-repeat;
}
#DivId {
background-image: url(../InventoryAssets/Key-trimmy.png);
}
In my opinion you should keep the file in the same folder in which you html file is there and then try it for example
#DivId {
background-image: url(Key-trimmy.png);
}
I hope this helps you
or try
document.body.style.backgroundImage = "url('Key-trimmy.png')";
you can also add image in body tag in html
<body style="background-image: Key-trimmy.png;">
I suggest giving a height value to the div. Background images are not HTML content themselves.
For example:
#DivId {
background-image: url(../InventoryAssets/Key-trimmy.png);
height: 500px;
}
I am using this code to show image
<img class="imgpath" />
<style>
.imgpath{
width: 32px;
height: 32px;
background-image: url(/images/logout.png);
background-repeat: no-repeat;
}
</style>
but I am getting this
What is causing this and how can I fix it?
This is my image
When using the img html tag, you are supposed to specify the src. Since you didn't, it displays a default small image showing that the browser couldn't get an image from src.
You have at least two possibilities depending on what you intend to do:
Use src and remove background css rules: <img class="imgpath" src="/images/logout.png"/>
Use another html tag, example: <div class="imgpath"></div>
I am trying to place a background image to a tag, when I set the image link in background-image:url it is not showing me the image as background. This is my code, what could I be doing wrong?
<a
href="#"
data-toggle="lightbox"
title="Instagram"
style="
width: 400px;
height: 400px;
background-image: url('https://scontent-atl3-2.cdninstagram.com/v/t51.2885-15/275180538_484682353010222_2402478995051705385_n.jpg?stp=dst-jpg_e35_s640x640_sh0.08&_nc_ht=scontent-atl3-2.cdninstagram.com&_nc_cat=102&_nc_ohc=fTObVsU65g8AX8x2Wuy&edm=ABfd0MgBAAAA&ccb=7-4&oh=00_AT-oNSMzXpDYHz0_nSlywYBoscNl37e8kWF8dEe3-4zxWA&oe=625818CB&_nc_sid=7bff83') !important;
"
>
<div class="photo-box-content">
<span>Instagram223424</span>
</div>
</a>
I Assume you are trying to load image from instagram or facebook content because of the URL. It is not allowed to be load like that, try saving the image locally that's the quickest solution.
I will only recommend you to assign the background image locally. First, download the image and then, add it to your code main file. The main problem while you import the url is, if the image of the url is deleted by any reasons, your webpage will not display the image anymore. So, you should download it and then add it to your code main file. Then, rename the picture to a short name (recommended). Then you should code like this 👇
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.body {
width: 100%;
height: 100vh;
/*locally from the device*/
background: url('example.jpg');
/*to adjust the image perfectly according to the device*/
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
<body>
<div class="main">
<div class="body">
<h2>This is a heading</h2>
</div>
</div>
</body>
This is the method which I was following for the past few months. Hope it will help you ☺.
I found the same reference with this question, here's the link:
Visit instagram style explore page image list with CSS
I'm currently learning html and CSS. I'm practicing by making a very basic website but have came across an issue when I added another image on top of my background image (the twitter logo). I tried to move the image using style="top:-90px;"but there was no effect. What ever classes I used to try to move the image nothing happened. I don't know how to target the image via CSS either.
Please help, sorry I know very little because I'm trying to learn.
<!DOCTYPE html>
<head>
<style>
body {
text-align: center;
background: url("LINK");
background-size: cover;
color: white;
font-family: sans-serif;
background-repeat: no-repeat;
background-attachment: fixed;
font-weight: lighter;
}
p {
text-align: center;
font-size: 24px;
font-family: sans-serif;
}
</style>
</head>
<body>
<img src="http://www.scottish.parliament.uk/images/Logos%20and%20graphics/TwitterLogoSmall20120927.gif" height="50" width="50" style="top:-90px;">
<p>Hello!</p>
</body>
top doesn't do anything to elements with position:static (the default). You should set position to:
position:relative Moves the image 90 pixels up
position:absolute Moves the image so its top edge is 90 pixesl above the top edge of its offset container (<body> in this case)
position:fixed Moves the image to be 90 pixels above the top of the vieport.
In your situation, I'm fairly sure you want position:relative
top works with position: absolute.
Maybe you wanted to set
margin-top: value;
If you are new to html and css then I recommend put your image and link
<img src="xyz"/>
inside of a div (if you aren't using html5), like this
<div id="myImage">
<img src="xyz"/>
</div>
then in your css use
#myImage {
position:relative;
top:-90px
<img src="http://www.scottish.parliament.uk/images/Logos%20and%20graphics/TwitterLogoSmall20120927.gif" height="50" width="50" style="top:-90px; position:relative;">
Copy this and paste it on your file.
In style you can do:
#image{
margin-top:90px
}
in html
<div id="image"><img src...........>
This is an example but it will work
i'm new to css and html.
i had something like this and i don't get the background-image show up
...
<style type="text/css">
#header_contain{
width:935px;
height: 135px;
background-image: url('bg.gif') repeat-x;
background-color:#E42323;
}
</style>
</head>
<body>
<div id="header_contain">
<h4>haga</h4>
</div>
</body>
...
I checked the image location and it's alright. I put an image from google and it shows. Now it only shows the bg colour. How can i get the bg image show up?
Change your css to this:
#header_contain{
width:935px;
height: 135px;
background-image: url('bg.gif');
background-repeat: repeat-x;
background-color:#E42323;
}
In your browser right click on the element and choose inspect element .
In the open window find your element properties and find its background url.
If the url is not correct you will see a tooltip Failed to load the url.
firefox firebug
in the firefox browser, open the firebug plugin and change to console tab, reload the page.
You will see the http requests there. If the browser fail to open the Url, you will see an error at console.
background-image property value should contain image URL only while you have repeat-x too.
You should write
background-image: url('bg.gif');
background-repeat: repeat-x;
background-color:#E42323;
background-position: left top;
You need to undstand all this things like
"background image" is the tag in which you can add image.
"background-repeat" this is help you to repeat the image in x and y axis
"background-color" is help you in fill the color
"background-position" will help you in change the position of image in px , em etc.
so over code can be in this way as wel "background: url('bg.gif') #fff left top repeat-x ;"