background image in span element is overlapping another element background image
background-color: inherit;
backface-visibility: hidden;
i already give these two properties for prevent issue. but sometimes issues came in my web page.
.iconImage {
background-image: url(images/svg/S_TL_CATALOG.svg);
margin-left: -18px;
width: 36px;
height: 36px;
width: 36px;
margin: auto;
display: inline-block;
cursor: pointer;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: relative;
left: 50%;
background-color: inherit;
backface-visibility: hidden;
}
help me to solve this issue.thanks
<div> // listed images for tools icon
<span></span> //background image1 .. this is static image
<span></span> //background image2 .. coming images are dynamically adding images by drag and drop
---------
</div>
this is my html format.
after refresh my webpage background image2 loading first then background image1 loading next image2 is overlapping the image1.
mouseover on the two images at that time also overlapping. anything css properties is there for solve this
First of all, it would help if u post a more detailed code.
Maybe it’s a display problem..
Try to change the display value:
display: block;
If u want to display the span block ements next to each other, add
float: left;
background-blend-mode: screen;
backface-visibility: hidden;
give this css property to element
Related
I'm trying to to have an icon (=background image) and text next to a checkbox. I have added image and text via a before pseudo element 15px on the right of the check box, which is where the background image then appears. Unfortunately the text (= content) starts where the background image is so they are overlapping. I have tried to move the text a bit right by adding spaces in "content", but \0020 works only once.
Please see my below snippet.
Could anyone help how I can align the background image and text neatly next to each other?
Thank you very much in advance!!
David
.subcategory1::before {
content: "\0020 \0020 Cardio Entertainment";
background-image: url(https://designmodo.com/wp-content/uploads/2015/03/designmodo-icon.png) !important;
background-repeat: no-repeat !important;
padding-left: 10px;
background-size: 15px;
position: relative;
left: 15px;
white-space: nowrap; /* avoid line breaks in tool tip */
}
<span class="subcategory1"></span>
Simply adjust the padding and also background position if needed:
.subcategory1::before {
content: "Cardio Entertainment";
background-image: url(https://designmodo.com/wp-content/uploads/2015/03/designmodo-icon.png);
background-repeat: no-repeat ;
background-position:0 1px;
padding-left: 18px;
background-size: 15px;
position: relative;
white-space: nowrap;
}
<span class="subcategory1"></span>
I have a problem with background of an element in my website. On PC browser, this element is looking that:
but on mobile phone, this element is looking that:
Why this icon "X" can't be display on mobile phones? Here is my CSS code:
.select2-search-choice-close {
display: block;
position: absolute;
right: 3px;
top: 4px;
width: 12px;
height: 13px;
font-size: 1px;
background-repeat: no-repeat;
background-image: url('http://mysite.pl/templates/default/panel/img/select2.png');
background-position: right top;
outline: none;
}
Can anyone help me? Thanks.
EDIT:
The problem is with this layout: https://wrappixel.com/demos/free-admin-templates/maruti-admin/form-common.html
On mobile there is another style overriding the background image as you can see in this screenshot :
As you can see it's on the line 475 of your file, so simply edit/remove it.
Ok this is really stumping me, probably because i don't understand it 100%. I have the following code to display a responsive background-image on the header:
.home .site-header-main:before{
display: block;
max-width: 100%;
max-height: 100%;
background-color: transparent;
background-image: url('/images/home-menu/home_honey_drip.png');
background-repeat: no-repeat;
background-size: 100%;
padding-top: 35%;
}
What i want it to do is display the 'home_honey_drip.png' under the menu text and then 'overflow' it over the top of the body content. I have tried adding position: absolute; However the image disappears.
Thank you in advance.
I think you need to use position relative and move the content of the menu to top.
You can do this using two divs, one with the image and other with the menu content.
#menu{
top:-100px;
position: relative;
color:white;
}
You can check my jsfiddle. Just add the rest of the css you need to your image.
I am in the process of designing a web page and I'm using the following CSS to create the page header with the main header image centered in a 1000px width page, and for a repeating edge image going across the top of the body and underneath the header to spread across the whole browser page width.
body {
font-family: Tahoma;
background-color: #0184AE;
background-image: url('/images/headeredge.jpg');
background-repeat: repeat-x;
background-position: top;
margin: 0;
position: relative;
}
.whole-page {
width: 1000px;
margin: auto;
padding: 0;
text-align: left;
position: relative;
border-radius: 0 0 15px 15px;
}
.header {
width: 100%;
height: 120px;
color: white;
background-image: url('/images/header.jpg');
background-repeat: no-repeat;
font-size: 10pt;
margin-top: 0px;
margin-bottom: 0;
padding-top: 10px;
border: 1px black none;
position: relative;
}
The CSS above works, except when a toolbar appears. I'm using Chrome with a SEO toolbar and it displaces the centered header image correctly, it pushes it down underneath the toolbar so I can see the whole image.
However, the repeated body image is not displaced at all and the toolbar covers the top so many pixels. This puts the whole thing out of whack.
I've tried a few options in the CSS, but so far nothing seems to work. I'm guessing here, but I think the toolbar draws itself using CSS that 'exists' under the body tag.
Can anyone suggest anything, I'd like either the whole header pushed down, or not. Just so it's consistent.
Using the Chrome developer tools (hit f12) you can inspect (click the magnifying glass icon on the bottom) the toolbar element. Doing this you can see that it is indeed inserted to the body of document. This will unfortunately result in the actual behavior you are seeing. In other words, this is not your fault but the fault of the toolbar developers.
One (ugly) work around is to throw an additional div around your content and apply the background to that.
E.G.
HTML
<body>
<div id="notBody">
<!--Rest of your headers, content, etc here -->
</div>
</body>
CSS
body {
font-family: Tahoma;
background-color: #0184AE;
margin: 0;
position: relative;
}
#notBody {
background-image: url('/images/headeredge.jpg');
background-repeat: repeat-x;
background-position: top;
}
in your header class change to position: absolute; and use top to set how many pixels you want your header to be from the top of the page.
.header {
position: absolute;
/* all your other styles */
top: 200px;
}
Using a CSS image sprite, I'm creating an 'interactive' image where hovering over certain areas changes part of the image. All works fine but struggling with being able to control the area of the hover once you are over the hover area.
For example, lets say the main area is 400x400 pixels and the hover area is 100x100 from the top left corner. As you move into the hover area, the 'new' image to display is 200x200. This appears but then this 'new' 200x200 image becomes active; I can then move anywhere within this new image (to say 150x150) and the hover image is still there even though now I am out of the 100x100 original hover area. Is there any way to restrain this so that the active area is always 100x100 even with the 200x200 hovered image displayed?
My (cut-down) CSS (areaTest.css) is:
#bigArea {
width: 400px;
height: 400px;
background: url(areaImage.jpg) no-repeat;
margin: 10px auto; padding: 0;
position: relative;
}
#bigArea li {
margin: 0;
padding: 0;
list-style: none;
display: block;
position: absolute;
}
#bigArea a {
display: block;
text-indent: -9999px;
text-decoration: none;
}
#littleArea {
width: 100px;
height: 100px;
}
#littleArea a {
width: 100px;
height: 100px;
}
#littleArea a:hover {
width: 200px;
height: 200px;
background: url(areaImage.jpg) 0px -410px no-repeat;
}
and my HTML is:
<link href="areaTest.css" rel="stylesheet" type="text/css">
<div>
<ul id="bigArea">
<li id="littleArea"></li>
</ul>
</div>
Any help would be much appreciated.
Thanks, Jam
I forked Kyomu's solution and applied the opposite: http://jsfiddle.net/FEkcx/
The <a> is an empty block that is on top of a <div> that actually has the background image. The hover is triggered using #littleArea a:hover + div.
Well, I have a solution. "Cover up" the part you don't want it to trigger on (ex: with empty divs). By doing this it will no longer be hover over the object.
Example
I think there might be a better way using selectors (like +), but this works.