I'm trying to get an image to change to another when i hover over the image, but nothing appears on screen and I'm baffled. The HTML and CSS are in the same file. everything is in a folder called 'walrus' and within that folder are the html/css coding and an image floder called 'images'.
Here's the code:
<style>
.b-george {
width: 130px;
height: 195px;
background: url("images/beatlegeorge.jpg") no-repeat;
margin: 50px;
}
.b-george:hover {
background: url("images/george.jpg") no-repeat;
}
</style>
<div class="b-george"></div>'
You need to provide background-size value for that element:
background-size: 130px 195px;
.b-george {
width: 130px;
height: 195px;
background: url("https://www.netclipart.com/pp/m/1-15005_animals-clipart-png-cartoon-animals-png-cute-animal.png") no-repeat;
margin: 50px;
background-size: 130px 195px;
}
.b-george:hover {
background: url("http://pluspng.com/img-png/animal-png-i-absolutely-love-tigers-and-have-two-of-my-own-on-my-tattoos-347.jpg") no-repeat;
background-size: 130px 195px;
}
<div class="b-george"></div>
Related
by default styles are that:
.landing-icon.self-service-badge:before {
background-image: url("/images/Evolution/site/self-service-badge.svg");
height: 76px;
width: 76px;
}
and image is centered. but when using internet explorer, background image is on the left side. i tried this:
.landing-icon.self-service-badge:before {
background-size: cover;
background-position: center;
background-image: url("/images/Evolution/site/self-service-badge.svg");
height: 76px;
width: 76px;
}
but this doesn't work for me, image is still on the left side, what can you advice?
Have u tried using auto-align, here is an exemple.
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
I am looking for the page look; when there is a (what looks like) frame in the centre and an image around that or a blank background. http://hopelessrecords.com/about-us/ this is a link to a site, the page and background idea is what I would like to achieve.
(I didn't know how to phrase this properly so forgive me if my terminology is off and there is something out there that I missed when searching).
Try it in css
html {
height: 100%;
width: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background: url(./yourImage.jpg);
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}
.yourPage {
max-width: 1230px;
margin: 0 auto;
background-color: #fff;
}
And this in html
<div class="yourPage">
Your content
</div>
html {
height: 100%;
width: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background: url(http://lorempixel.com/400/200/);
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}
.yourPage {
max-width: 400px;
margin: 0 auto;
background-color: #fff;
}
<div class="yourPage">
Your content
</div>
Just add the below to your styles.css
body { padding: 5em 15em; /* adds a spacing of 5x the font size to the top and bottom, and 15x of that to the left and right sides of the page. */
Read for a complete guide on padding, or check MDN article on box-model
my problem :
I have the class .logo working perfecly with this size: width: 316px; height: 300px;
the problem is this logo never will have this size always, the width and height should not be defined, so next logo can fits well.
I tried remove the width and height without no success, when I do this the logo does not appear.
it is something I can do in the css to make this work without set width and height?
https://jsfiddle.net/pLfgam3r/1/
.logo {
background-image: url('https://lh5.ggpht.com/tq3WqEUxtRyBn-d_0t3j6WKNHuJDrmLq-FE3GAYrsAMQFIaS7FIgRLfzzql2SvfvLqto=w300-rw');
background-repeat: no-repeat;
width: 316px;
height: 300px;
display: inline-block;
margin-top: 20px;
margin-left: 20px;
}
.logo2 {
background-image: url('https://i.ytimg.com/vi/SfBR9aGrk9k/maxresdefault.jpg');
background-repeat: no-repeat;
width: 316px;
height: 300px;
display: inline-block;
margin-top: 20px;
margin-left: 20px;
}
<div class="logo"></div>
<div class="logo2"></div>
Set background-size: contain;
https://jsfiddle.net/wuqvwpkL/1/
I found this post:
Why doesn't the background image show up without specific width and height?
So your css should look like this:
.logo2 {
background-image: url('https://i.ytimg.com/vi/SfBR9aGrk9k/maxresdefault.jpg');
no-repeat: true;
display: block;
position: relative;
width: 316px;
height: 300px;
padding-bottom: 20%;
background-size: 100%;
background-repeat: no-repeat
}
This is working for both logos that has different sizes.
https://jsfiddle.net/pLfgam3r/4/
I have got a simple part of a website where i am using some CSS to get a square tile. The problem is the whole tile is never actually showing up, when i use it in HTML and put a lot of text in it, the width and height attribute dont seem to have any effect on the div. Here
`
.tileYellowDouble {
display: inline-block;
background-color: Black;
height: 200px;
width: 400px;
border: solid 1px black;
}
#imageTile {
float: right;
display: inline-block;
background: url(Thimo.png);
background-size: 100% 100%;
width: 400px;
height: 600px;
border-radius: 0px 10px 10px 0px;
}
body {
background: url(York.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.main {
position: fixed;
border: solid 1px black;
top: 50%;
left: 50%;
margin-top: -300px;
margin-left: -500px;
width: 1000px;
height: 600px;
background: #35bc7a;
border-radius: 10px;
}
<div class="main">
<div id="imageTile"></div>
<div class="tileYellowDouble">Doesnt show the background color or border</div>
</div>
I just found out that when i comment out .main it does show the box, but when it is back in it just shows a clear background. Also using Z-index doesnt work
I'm trying to make an image change when a user hovers over it, but the method I used seems to cut off the image, not showing all of it. How can I have it scale the image to the size I specify, rather than just making the div that size and cutting off the rest?
HTML:
<div class="navbar-image" id="navbar-image-ID2Games">
</div>
CSS:
#navbar-image-ID2Games {
width: 5rem;
height: 5rem;
background-repeat: no-repeat;
background: url(http://i.imgur.com/Ou5cX4D.png);
}
#navbar-image-ID2Games:hover {
width: 5rem;
height: 5rem;
background: url(http://i.imgur.com/Tx0SVZr.png) no-repeat;
}
See here: https://jsfiddle.net/7a7ghfw4/
As you can see from the imgur url, the image is supposed to be a save icon, but it cuts off everything but the top left.
Add "background-size: contain" to both of your css rules.
#navbar-image-ID2Games {
width: 5rem;
height: 5rem;
background-repeat: no-repeat;
background: url(http://i.imgur.com/Ou5cX4D.png);
background-size: contain;
}
#navbar-image-ID2Games:hover {
width: 5rem;
height: 5rem;
background: url(http://i.imgur.com/Tx0SVZr.png) no-repeat;
background-size: contain;
}
This works:
#navbar-image-ID2Games {
width: 265px;
height: 265px;
background-repeat: no-repeat;
background: url(http://i.imgur.com/Ou5cX4D.png);
}
#navbar-image-ID2Games:hover {
width: 265px;
height: 265px;
background: url(http://i.imgur.com/Tx0SVZr.png) no-repeat;
}
I only changed the width and height for both classes