I am having difficulty trying to make the logo at the top of my web page change when I hover over it.
To be more specific, I have a logo at the top of my page, and I created another logo slightly different for when a user hovers over it.
Here is my code:
#top{
width:1366px;
height:100px;
background-color:#1e125b;
}
body{
background-color:white;
background-repeat:repeat;
margin: 0;
}
#top:hover{
background-image: url('Logo_hover.png');
}
The Logo_hover multiplies itself throughout the whole div, instead of simply changing the initial image. I understand that the background-image is not what I should be using for this problem but I cannot seem to find any other solutions.
#top:hover{
background-image: url('Logo_hover.png');
background-repeat: none
}
have you used this.onmouseover & this.onmouseout ?
<img src='your pic' onmouseover="this.src='your pic on mouse over';" onmouseout="this.src='your pic on mouse out';" />
.logo {
background-image: url("http://placehold.it/120x120&text=image1");
background-repeat: no-repeat;
height: 120px;
width: 120px;
}
.logo:hover{
background-image: url("http://placehold.it/120x120&text=image2");
background-repeat: no-repeat;
height: 120px;
width: 120px;
}
<div class="logo"></div>
#top{
background-image: url(logo.png);
background-repeat: no-repeat;
background-size: cover;
overflow:hidden;
width: 120px;
height: 120px;
}
#top:hover{
background-image: url(logo_hover.png);
}
Related
I am not able to understand why in the background the image is not getting displayed.
body{
background-image: url('../Images/Chicken.jpeg');
background: cyan;
}
The path of the image is right. whats the problem then? but the background color is getting being displayed.
Because you override an image with the color. If you want to use them both:
body{
background-image: url('../Images/Chicken.jpeg');
background-color: cyan;
}
or you can combine them in to one line:
body{
background: cyan url('../Images/Chicken.jpeg');
}
.main {
background-image: url('https://image.shutterstock.com/image-photo/beautiful-water-drop-on-dandelion-260nw-789676552.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
height: 100vh;
}
<div class="main">
</div>
I have an image that I am showing on a page. Here is my css:
body {
background: url(./../imgs/beach.png) no-repeat;
background-size: 100%;
}
When I do this, everything shows just fine. I then try to show the same image in a div. Here is my html:
<body>
<div class="background-image"></div>
</body>
And here is my new css:
.background-image {
background: url(./../imgs/beach.png) no-repeat;
background-size: 100%;
}
But now nothing shows. I look in my network tab and I see that the image is available, but it is not showing on the page. What am I doing wrong?
It's because the div is 0 pixels tall, give it some height, for example:
.background-image {
background: url(./../imgs/beach.png) no-repeat;
background-size: 100%;
height: 100vh;
}
Since you are only using background you need to set a height/width on the div itself.
.background-image {
background: url(./../imgs/beach.png) no-repeat;
background-size: 100%;
height: */Your Value/*;
}
I would suggest remove background-size: 100%; .. instead add height and width as 100%.
body {
background: url(./../imgs/beach.png) no-repeat;
height: 100%;
width: 100%;
}
I am trying to give a div class the background image of a header but it won't show up.
Please see:
http://jsfiddle.net/eqzro6s3/
[css]
.header
{
background-image: url('http://wpsites.net/wp-content/uploads/2013/12/Custom-Header-Image.png') no-repeat;
width: 100%;
}
[html]
<div class="header">
</div>
What am i doing wrong? Thanks in advance.
Elements with backgrounds need to have dimensions. They don't automatically size themselves to the background image.
.header
{
background-image: url('http://wpsites.net/wp-content/uploads/2013/12/Custom-Header-Image.png') no-repeat;
width: 100%;
height: ?????
}
background-image is just not a short-hand property, thus you cannot use more than one value:
.header
{
background-image: url('path.png');/* remove no-repeat from here*/
background-repeat: no-repeat; /*use no-repeat here*/
width: 100%;
}
Or, use it like this:
.header
{
/*short-hand method can have multiple values*/
background: url('path.png') no-repeat;
width: 100%;
}
Try this:
.header
{
background: #FFFFFF url('http://wpsites.net/wp-content/uploads/2013/12/Custom-Header-Image.png') left center no-repeat;
width:100%;
height:431px;
}
http://jsfiddle.net/csdtesting/eqzro6s3/1/
Js Fiddle
.header{
background: url('http://wpsites.net/wp-content/uploads/2013/12/Custom-Header-Image.png') no-repeat;
width: 100%;
height:432px;
}
change background-image: to background:
In my website and in this page I have a background image for my page. This background image must be fixed. This page works correctly in Firefox, but doesn't work in Google Chrome . the background image css is like this :
.aboutBG {
position: fixed;
width: 100%;
height: 100%;
background-image: url(../img/bg1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
z-index: 10;
}
I searched around the web and find some answers like this for using code like below :
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
but it doesn't work
You can not apply background image to div make some good logic
Your css should be looks like
html, body{
height: 100%;
width: 100%;
background-image: url(http://justbeecosmetics.com/img/headImage.jpg);
background-attachment: fixed;
}
#blank{
height:80%;
}
#top{
height: 70%;
background-color:blue;
}
#bottom{
height:50%;
background-color:red;
}
Please check the fiddle here
http://jsfiddle.net/jdmitz/V8WqE/
You have added to wrong position
Easier would be to add:
#container {
background-image: url(../img/bg1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
see the image ...
To understand ;P
this is the code i use
.img1 {
background-image: url('img1.png');
width: 381px;
height: 187px;
background-repeat: no-repeat;
float: left;}
.img1:hover {
background-image: url('imghover.png');
width: 381px;
height: 115px;
background-repeat: no-repeat;
}
but it is affecting the img1
I want it to appear above the img1 without affecting on it
i fix it sorry
see this is example
https://dl.dropbox.com/u/35904623/css.gif
+
another one
https://dl.dropbox.com/u/35904623/css2.gif
On hover you are setting height as 381px and margin-top as -116px
height: 381px;
margin-top: -116px;
Which can affect the image 1.