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.
Related
This never happened to me before, and i can't figure our why the hover happens, but the back image won't change :
<div class="settings" id="settings" style="background-image:url(assets/settings.svg);"></div>
.settings{
width: 2.0vw;
height: 2.0vw;
margin-top: calc((8vh - 2vw)/2);
margin-left: 1.5vw;
float: left;
background-position: center;
background-size: contain;
}
.settings:hover{
background-image: url("assets/settingsH.svg");
}
To prove that the image is there, if i set assets/settingsH.svg in the html - it will show the hover image.
If i change size on hover, it will also work (hover is happening) but back image won't change no matter what.
No other hidden settings class was found.
That's because you put the background image inline with html, so if you want to replace it via css, you must put an !important:
.settings:hover{
background-image: url("assets/settingsH.svg")!important;
}
or bettter, put the background in css:
.settings {
width: 2.0vw;
height: 2.0vw;
margin-top: calc((8vh - 2vw) / 2);
margin-left: 1.5vw;
float: left;
background-position: center;
background-size: contain;
background-image: url("https://via.placeholder.com/400/0000FF");
}
.settings:hover {
background-image: url("https://via.placeholder.com/400/FF0000");
}
<div class="settings" id="settings"></div>
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);
}
i am trying to create a page that has a background image in between a header and footer will work on any screen size.
I have managed to create the page and it works fine on desktop screen. The problem i have is when I resize to mobile size screen then the background is repeated.
Here is my code:
div {
width: 100%;
height: 5886px;
background-image: url('services-yellow.jpg');
background-size: 100% auto;
background-repeat: none;
border: none;
}
Has the height attribute set at a specific height, but i am not sure how i can change this so that it works on all screen sizes.
The site can be viewed at: http://s116169771.websitehome.co.uk/testsite/
If somebody could please advise on how i could fix this, would really appreciate it.
Thanks in advance.
none is not a valid value for background-repeat, use no-repeat instead.
background-repeat property (MDN) (W3Schools)
Here is a list of possible values for background-repeat, you need:
background-repeat: no-repeat;
None doesn't exist for this property.
Use background-repeat:no-repeat
div {
width: 100%;
height: 5886px;
background-image: url('services-yellow.jpg');
background-size: 100% auto;
background-repeat: no-repeat;
border: none;
}
or simply short the code
div {
width: 100%;
height: 5886px;
background: url('services-yellow.jpg') no-repeat 100%;
border: none;
}
Change background-repeat: none; to background-repeat: no-repeat; none is not a valid value for background-repeat property.
Your code should be:
div {
width: 100%;
height: 5886px;
background-image: url('services-yellow.jpg');
background-size: 100% auto;
background-repeat: no-repeat;
border: none;
}
You can also use short hand css background property as follows:
div {
width: 100%;
height: 5886px;
background: url('services-yellow.jpg') no-repeat 100% auto;
border: none;
}
More Details
I have read so many posts about responsive CSS Background-Image's but I can't make mine work.
My site is http://www.conn3cted.uk.tn/intManagement.html and I'm trying to use the image as a 'banner' so can't have the height too large.
I seem to be able to fix the issue either on Desktop or Mobile, but they don't want to work together. I've used the suggested solutions (below) but I don't get the whole picture to scale up/down and it only shows part of it or a lot of white space. What am I doing wrong!?
.whatWeDo {
padding-top: 100px;
background-image: url("/images/intManagement/homePage/whatwedo.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 120px;
}
Try this css and use media queries to change your margin-top for mobile device:
.whatWeDo {
background-image: url("/images/intManagement/homePage/whatwedo.jpg");
background-repeat: no-repeat;
background-size: 100% auto;
height: 100vh;
margin-top: 80px;
}
#media screen and (max-width: 878px) {
.whatWeDo {
margin-top: 170px;
}
}
Try this css with replace your css:
This can also responsive only set top as per you needed:
.whatWeDo {
background-image: url("/images/intManagement/homePage/whatwedo.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
float: left;
height: 100%;
padding-top: 100px;
position: relative;
top: 80px;
width: 100%;
}
I am trying to make my background-img round and put it into center. I am trying with code given below:
.jumbotronhh
{
background-image: url('http://simplelize.com/wp content/uploads/2013/03/old-camera-620x350.jpg');
background-repeat: no-repeat;
background-position: 50%;
border-radius: 50%;
height: 300px;
width: 300px; *//If I don't use this line then the background picture stays in center in a rectangular form but after using this I got the bg-img circle but it moves at the left side of the screen..*
}
what to do?! I am totally novice.. pls help..
You could put the image behind everything else to look like an actual background-image, by creating a div class and setting some z-index.
<div class="bg-image">
<img src="mybackground.jpg">
</div>
And CSS:
.bg-image {
position: relative;
min-width: 100%;
min-height: auto;
}
.bg-image img {
position: relative;
width: 100%;
height: auto;
z-index: -100;
border-radius: 30px 30px 30px 30px;
}
Since you really can't use the border-radius in background properties.
I tested your code with another picture and it works fine
Let me know if you mean another thing.
HTML:
<div class="jumbotronhh"></div>
CSS:
.jumbotronhh
{
background-image: url('http://goo.gl/amTgah');
background-repeat: no-repeat;
background-position: 50%;
border-radius: 50%;
height: 300px;
width: 300px;
}