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
Related
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
At first, the problem seemed to be that only my CSS file, which was linked into my HTML document, wasn't loading in the browser when opened, but then when integrating an image into the HTML document I found it also wasn't appearing in the browser when the document was opened (and I used Microsoft Edge, Chrome, and Firefox to open the document. All files are located in the same folder on my computer, and yet using relative paths to locate the files also seem to be doing nothing. The code looks as such. (Worth noting that I was messing around with both the background-image property in CSS and the tag in HTML to load the same file since neither seemed to work)
HTML Code:
<head>
<title>Quad Game Schedule</title>
<link type="stylesheet" rel="text/css" href="displaylayout.css">
</head>
<body>
<div class="fieldimg">
<img src="field.png" alt="Field Overhead Image">
</div>
<div class="F1">
<h2>Full Field Games</h2>
<ul>
<li>12:00 - TSPro vs Wings</li>
<li>12:45 - Team Evanston vs Bosnia</li>
</ul>
</div>
CSS Code (displaylayout.css):
body {
background-color: rgb(242, 242, 242);
color: red;
}
p {
color: red;
}
img {
align-self: center;
vertical-align: top;
}
.fieldimg {
height: 30%;
width: 45%;
background-image: image(field.png);
background-size: cover;
}
.F1 {
align-self: center;
float: left;
clear: none;
width: auto;
}
In the browser developer side bar, it says that there are no style properties for the webpage, which can't be true. I can always write the CSS into the HTML document, but the image is also an integral part of the end product and that won't load either. (Also maybe worth noting, with text-color for the p element and body used in CSS was merely for testing purposes)
Edit: this is the exact code for the test files I made that still don't work.
HTML:
<html>
<head>
<title>Test Webpage</title>
<link type="stylesheet" rel="text/css" href="test.css">
</head>
<body>
<h1>This is a test heading</h1>
<p>This is a test paragraph</p>
<img src="test.png" alt="Test Picture">
</body>
</html>
CSS:
h1 {
color: red;
font-size: 24pt;
}
p {
color: blue;
font-size: 12pt;
}
The image in the new folder for these test files was renamed as test.png.
Edit 2: I just found out that older files of mine that linked to external files still work, so the problem lies with the new files I make.
In your code you are trying to load the image twice, once as a background image for the div with class fieldimg, and once inside it in an ` tag:
<div class="fieldimg">
<img src="field.png" alt="Field Overhead Image">
</div>
.fieldimg {
height: 30%;
width: 45%;
background-image: image(field.png);
background-size: cover;
}
1.) The background image needs to have be defined like background-image: url(field.png), not like you did it ("image(field.png)")
2.) The height setting for .fieldimg (30%) won't work, because there is no container around it that has a height setting to which the 30% could relate. So this becomes 0px high and therefore won't be visible. To avoid this you can apply height: 100% to the body
If you fix both, you'll have to erase either the background image or the image tag, otherwise you'll get your image twice...
Your CSS contains an error that might be the cause:
.fieldimg {
height: 300px; /* set an absolute amount of pixels here instead of a relative number (which is relative to nothing) */
width: 45%;
background-image: url('field.png'); /* this is how you place images by setting a background image */
background-size: cover;
}
Reference
Also, remember that when not using relative paths in your CSS it is relative to the location of the .css file! So if using an image as a background image in a specific CSS folder, be sure the image is relative to that CSS file location.
I am trying to setup background images using CSS but I can't seem to get the images to populate correctly.
Here is the CSS for what I want to do
a.fb {
background-image: url('img/Facebook.png');
}
a.fb:hover {
background-image: url('img/FacebookHover.png');
}
Here is the html code that I am using, I have tried a couple of different ways to populate the images with no luck
<div class="footer">
<a class="fb" href="http://www.facebook.com" target="_blank"></a>
</div>
Any help would be greatly appreciated
Okay added the following and still not go any other thoughts
a.fb {
display:block;
width: 33px;
height: 33px
background-image: url('img/Facebook.png');
}
EDIT: Yup got it working now forgot the ; after height, but no I get a white border around it and tried setting border: none; no luck
a.fb {
border: none;
display:block;
width: 33px;
height: 33px;
background-image: url('img/Facebook.png');
}
An anchor tag by default shows as an inline elements, so it depends on its content in order to get a height and width. To do what you want, you should add some styles: display:block; width: 20px; height: 20px.
You could also change the aproach completely and use html + mouseover and mouseout events:
<div class="footer">
<a class="fb" href="http://www.facebook.com" target="_blank">
<img src="http://www.facebook.com/images/fb_icon_325x325.png" alt="fb" name="fb" width="33px" height="33px" name="image_name" onmouseover="fb.src='http://goo.gl/cxiR7'; fb.width='38'; fb.height='38';" onmouseout="fb.src='http://www.facebook.com/images/fb_icon_325x325.png'; fb.width='33'; fb.height='33';" />
</a>
</div>
Here is a jsBin: http://jsbin.com/onehuw/1/edit
background-image only draws in the space that the element occupies. Your a tag has no content, and therefore it's width is 0. You'll not see any content (and background) until you give it at least some width (and height if needed).
You need to add padding to the <a> tag otherwise it has a width and height of 0 for example:
a.fb {
padding: 20px;
background-image: url('img/Facebook.png');
}
a.fb:hover {
background-image: url('img/FacebookHover.png');
}
You could also just set the width and height of the anchor
I have the following html:
<div class="A">
<img src="image1.png" width="100px" height="100px"/>
</div>
In my media queries css style sheet, I would like to replace that image with another one (image2.png).
What is the css code I need to write?
I tried the following:
.A img
{
background:url("image2.png") no-repeat;
}
But this doesn't seem correct?
If you are using CSS3, then content is the answer:
.A img
{
content: url("image2.png");
}
You can't modify that in CSS, instead, use a div like this:
<div id='#theImage'></div>
Then in CSS:
#theImage {
width:100px;
height:100px;
background:url("image1.png") no-repeat;
}
Then you can restyle the div using a media query.
Your code doesn't work because the image in the original <img> tag is a foreground image, which is different from a background image.
So setting the CSS doesn't get rid of the original image. And in addition, although the CSS does work, the background image it displays is shown behind the foreground image.
In order to do this, you need to either have the original image as a background image (ie set using CSS background-image property), or switch to replacing the foreground image in your script. This would involve setting the src attribute:
$('.a img').attr('src','newimage.png');
you're setting a background of an img element you won't be able to see, because the image defined in its src attribute is covering it
Anyway if both the images are relevant for the context from a semantic point of view, you should not use css to place the second image in place of the first one
If you put background on an image, the image will simply overlap the background; making the background totally invisible.
The solution is to make the image as a background of an element
Like so: http://jsfiddle.net/PabXF/
.image-replacement {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(https://www.whatsappimages.in/wp-content/uploads/2021/07/Top-HD-sad-quotes-for-whatsapp-status-in-hindi-Pics-Images-Download-Free.gif)
no-repeat;
width: 180px;
height: 236px;
padding-left: 180px;
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Image replaced with Image</h2>
<img class="image-replacement" src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80" />
</body>
</html>
I have this code:
HTML:
<img class="d" src="i3.jpg" alt=""/><img class="d" src="i4.jpg" alt=""/>
CSS:
img.d{margin-top:10px;margin-left:20px;}
however, I want to put the i3.jpg in the CSS, not the html to further separate the structure from the presentation...how do I go about doing this.
Thanks.
Found this
link here
You can set the image as a background image of an element.
HTML:
<div class="d"></div>
CSS:
div.d{width:20px; height:20px; margin-top:10px; margin-left:20px; background:url('i3.jpg') 0 0 no-repeat;}
One option would be to use e.g. a div-element and attach a background image to it using CSS.
An img tag should be used when the image is content, like a cat wearing a fun costume. Moving image references to CSS can make sense when they're stylistic/UI and not content.
That said, the answer is to remove your img tags and replace them with divs. You can then set a background-image for the div, and just give it some basic properties to size/position it.
HTML:
<div class="d"></div>
CSS:
div.d {
display: block;
background-image: url('i3.jpg');
width: 100px; /* or whatever it should be */
height: 100px; /* or whatever it should be */
margin-top: 10px;
margin-left: 20px;
}