I have tried all the solutions on SO but did not succeed. I have an image to be appear as a cursor on my image. I have tried all of these.
img:hover{
cursor: url(../images/wand.ico), auto;
}
img{
cursor: url(../images/wand.ico), auto;
}
Not with the .ico but with the .png too. In both cases these are not working. I have read this case. But doing so did not help. Resize the image but still cusror is not working. Any body can help me in this regard?. I did not have that much knowledge but i searched and researched almost every solution.
You need to set some other properties in your CSS.
img {
cursor: url(../images/wand.ico), auto;
// set the width and height to the size of the png/ico
width: 20px;
height: 20px;
// Set the display type
display: block;
}
Give that a try. I believe it's not working as the image has no dimensions, therefore, it's invisible.
Related
I have created an html document. Inside this I've imported an image under a paragraph. But whenever I change the resize my browser. The image disappears by moving below the page.
The image is given inside a card.
.Card{
border:none;
font-family: 'NCS Radhiumz';
border-radius: 15px;
background-color: #000000;
width:90%;
height: 85%;
margin-left: 80px;
padding-left: 5%;
padding-right: 5%;
I just want everything on the page to resize without disappearing from the page. I'm very new to coding.
Anybody know how to fix it?
What you're most likely missing is some styling on your image element. Try this in your css file:
img {
width: 100%;
object-fit: contain;
}
You can experiment with different ways to fit the image in your component. Check out these docs for some options.
you're asking for responsive web design. You can achieve that by implementing CSS Media Query.
Learning source:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
If you want your image to be in one place and don't move you can do that with position style in css like so:
.element {
position: fixed;
}
or
.element {
position: absolute;
}
But image moving below is normal since the browser can't fit the image besides the text.
If you want your image to behave differently you can do that by using #media query and manually write how the app should change based on screen width/height. But generally the best way to do so is using flex-box or grid, since the browser automatically does object moving for you.
I am trying to use sprites for a webpage but I don't know how to work with images being double resolution. Can you pls help?
So far I am using:
.div {
display: block;
margin: 0 auto;
width: 200px; ---> they remain 400px;
height: 200px; ---> they remain 400px;
background: url(Sprite.png) 10px 0;
}
The problem is that images still show too big. Not sure how to scale them down.
Thanks
You can specify the size of the background images by using the background-size property as shown in the example at https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background-size.
I am trying to hide a .div in based on this page http://pdtuk.com/learn-with-rockjam/ so that the contents of the page moves up.
If I change the properties in the custom CSS in the admin panel of the to the below it functions in inspector but does not seem to update or take any effect when I preview or try and make live. Any ideas on how I can resolve?
.page_banner .background_wrapper{
position: relative;
display: none;
width: 100%;
height: 46.500rem; /* 730px */
background-position: center left;
background-size: cover;
}
I hope I understood your question correctly.
There seems to be an unknown background-image.
<div class="background_wrapper" style="background-image:url('')">
So the specified height: 46.5rem converts to empty space.
One way to solve that:
height: 0
Adding this CSS rule should help:
.page_banner .background_wrapper {
display: none;
}
That element has a defined heigth which creates the unwanted space. Adding display: none makes it invisible and removes it from the document flow. But to be on the safe side you could also add height: 0;
I'm making a website with HTML5Boilerplate, but every time I use the css background or background-image property, the image doesn't show up.
Folders:
root/css/style.css
root/img_files/logo.png
My css code looks like this:
#logo {
position: absolute;
left: 20px;
top: 10px;
width: 164px;
height: 42px;
background: url(../img_files/logo.png);
background-repeat: none;
}
My stylesheet is properly added to the page:
I can't add a single background image to the objects on the page. HTML5Boilerplate has been installed, so maybe that't the problem, I'm not sure. Do you know why correct CSS and HTML doesn't display the images?
Change
background-repeat: none;
to
background-repeat: no-repeat;
Or just use
background: url(../img_files/logo.png) no-repeat;
I've just come to the same problem and discovered that in case you'll change ID from #logo to anything else (in HTML and CSS of course), then the same code will start to work. Can't say what has been "blocking" #logo to be used, but for now I don't have enough time to discover where the problem is.
Solution for now is to use anything else than #logo, eg. #logoTop or #siteLogo
Hope that helps.
EDIT: It was a selector typo problem which caused browser had ignored that. Weird was it had not happened when selector was changed to some other name than #logo. Please note that #logo:visible typo (instead of visited)
#logo, #logo:link, #logo:visited,
#logo:active, #logo:focus, #logo:hover
{
display: block;
width: 340px;
height: 150px;
background: url(../images/design-elements.png) 0 -300px no-repeat;
}
I had the same problem & found out that if without the width & height property, image will not display.
I have an unordered list of links and each link has a unique id.
I'm using that id with the :before selector to place
the associated website's favicon before the link (using the content property).
One of these icons is twice the size of the others.
Is there any way to change the size of this icon using CSS?
If the answer is no, is there any way to do this other than editing the image?
Visual reference:
Here is what I tried (and it doesn't seem to work):
#geog:before
{
content: url("icons/geogebra.ico") " ";
height: 50%;
width: 50%;
}
I've run into the same problem before. Try this:
#geog:before
{
display: inline-block;
width: 16px;
height: 16px;
margin-right: 5px;
content: "";
background: url("icons/geogebra.ico") no-repeat 0 0;
background-size: 100%;
}
I'm sure you'll have to tweak those values, but that worked for me. Of course, this won't work if you can't set it as a background image for some reason. Best of luck to you!
I believe you are looking for the zoom property. Check this jsfiddle
Also you can add spacing with margin-right between the icon and the content of the element.
Use PX instead of %
#geog:before
{
content: url("icons/geogebra.ico") " ";
height: 5px;
width: 5px;
}
Give that a try :-)