I'm trying to use the background link css property selector within WordPress for the image appear on it's page http://launique.co.uk/services-float/
First I used the default image link and entered the link to the default image, which I had uploaded to the media library:
background: url(http://launique.co.uk/wp-content/uploads/2016/07/fold.gif) no-repeat 0 0;
That didn't work.
Then after some research, I created a separate "images" folder within the child themes folder in my cpanel.
background: url(images/fold.gif) no-repeat 0 0;
But still to no avail...
This is the whole like of code:
.page-services h1::after {
content: '';
display: block;
height: 40px;
width: 40px;
background: url(images/fold.gif) no-repeat 0 0;
}
UPDATED: This should definitely work.
.page-services {
display: block;
position: relative;
}
.page-services h3::after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
height: 40px;
width: 40px;
background: url('http://launique.co.uk/wp-content/uploads/2016/07/fold.gif') no-repeat;
}
I inspected the HTML code on your site and I didn't find a H1 child elememt in the parent element div.page-services. Therefore your CSS rule will not work. There is, however, an H3 child element. When I altered your code in the debugger to .page-services h3::after{ ... } the image appeared.
Related
on this site, there is a line underneath "Marketing Agency Fremantle".
I have used Chrome Code Inspector but cannot find what is causing this.
I want to remove the line. Thanks.
the :after pseudo element for h2 is causing the underline.
It's this CSS rule:
body.home h2::after {
content: '';
width: 60px;
height: 1px;
background-color: #4a2e69;
position: absolute;
bottom: -5px;
margin: 0 auto;
left: 0;
right: 0;
}
You can erase it or (if you can't do that) add the following to set height to 0 and make it invisible that way:
body.home h2::after {
height: 1px !important;
}
There is :after in your h2 tag
I have a problem with sidebar of this page. I can not make it go under in the responsive version, especially in the smartphone version. Sidebar remains attached to the contents of the left but does not wrap
This is the link for the codepen
If codepen does not work, this is the link for the website.
archive-posts-w.with-sidebar .archive-sidebar {
display: block !important;
position: relative;
top: inherit;
left: 0;
width: 100%;
max-width: 350px;
bottom: inherit;
right: inherit;
clear: both;
float: left;
}
Html there will certainly be errors because it is a copy of a source of a website wordpress.
There are a few problems here:
Your container .archive-posts-w.with-sidebar has display: table;. Change that to display: block for smaller screens (i.e. in your media query)
The CSS for the part above your sidebar should be like this (for smaller screens):
.archive-posts-w.with-sidebar .archive-posts {
display: block;
vertical-align: top;
width: 100%;
}
And for .archive-posts-w.with-sidebar .archive-sidebar you have a max-width setting of 350px, also inherited from everal other rules, so change this rule (for smaller screens) to
.archive-posts-w.with-sidebar .archive-sidebar {
display: block !important;
position: relative;
top: inherit;
left: 0;
width: 100%;
max-width: none;/* <-- this one is changed */
bottom: inherit;
right: inherit;
clear: both;
}
First add class table td in that td class="test"
td.test
{
display:block
}
#sb_instagram .sbi_header_text .sbi_bio, #sb_instagram .sbi_header_text h3
{
margin:0px!important;
}
#sb_instagram .sbi_header_text .sbi_bio, #sb_instagram .sbi_header_text h3
In that class you have 'margin: 0 0 0 60px!important;' you change that 0px
abd check the devices
http://www.responsinator.com/?url=http://www.alchimieadv.biz/ricette/&device=ipad&orientation=portrait
This is my code in style.css related to the image and the hover image.
#gallery_prettyphoto.portfolio a span
{
z-index: 2000;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 98%;
display: none;
cursor: pointer;
}
.portfolio .gallery_2columns a span.image_hover
{background: black url("images/gallery_hover/hover_image_big.png") no-repeat center center;
}
Everything was fine till i updated my theme to newer version. I checked if the hover_image_big.png was missing, no, the file is there.
This happened to me recently and it took me a long time to find the solution, but it turns out that you have to use the write the css like this:
.portfolio .gallery_2columns a span.image_hover
{
background: black;
background: url("..images/gallery_hover/hover_image_big.png") no-repeat center center;
}
I hope this helps!
I have this image that I want to display on top of my product images when you HOVER on them.
This is what i'm using:
.centerBoxContentsFeatured img:hover {
background-image:url('http://i47.tinypic.com/vz2oj.gif');
}
It does work but it's being display behind the product image instead of on top of it. I tried absolute positioning and z-index but nothing seems to work.
http://www.pazzle.co.uk - trying to apply on the images on the main page. <<
EDIT:
#featuredProducts.centerBoxWrapper {
position: relative;
}
#featuredProducts.centerBoxWrapper:hover:before {
content: '';
width: 187px;
height: 179px;;
position: absolute;
top: 0;
left: 0;
background-image:url('http://i47.tinypic.com/vz2oj.gif');
}
a {
display: block;
position: relative;
width: 100px;
height: 100px;
}
a:hover:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-image:url('http://i47.tinypic.com/vz2oj.gif');
}
Demo
Use a pseudo element.
It's doing exactly what it's supposed to do. It's a background, so it will appear behind the container's content.
What you have to do here is to overlay a div over the image you're hovering.
I think this is possible a with a pure CSS solution, but it might be easier with some JavaScript.
See this question: on hover overlay image in CSS
I've got 2 elements, 2 images of exactly the same dimensions, positioned one on top of the other. Say they're called A and B (A is the top one). What I've done is made it so when you hover over A, its z-index decrements by 2 so that B is now on top, and B's hover: increments its z-index by 2 so it's now higher by 1 than A's original z-index (thus image B stays on top until you remove mouse). So basically...
#A {z-index: 5;}
#B {z-index: 4;}
#A:hover {z-index: 3;}
#B:hover {z-index: 6;}
This works perfectly in Firefox and Chrome, but IE doesn't want to hear about it, and my images keep spazzing while hovering over them. Any help is appreciated. Positioning is Absolute, if that matters.
#jklm313
That actually works in my IE9 as well. Maybe I should post the full code since one of my "images" is actually a social network button. So here it is:
HTML:
<div id="myTweetBrown"></div>
<div id="myTweet"><?php include ("myPHP/homepageSoc/tweet.php") ?></div>
CSS:
#myTweetBrown {
position: absolute;
background-image: url('../images/tweetBrown.png');
background-repeat: no-repeat;
background-position: center center;
height: 20px;
width: 54px;
left: 381px;
top: 662px;
z-index: 5;
}
#myTweetBrown:hover {
position: absolute;
z-index: 3;
}
#myTweet {
position: absolute;
height: 20px;
width: 54px;
left: 381px;
top: 662px;
z-index: 4;
}
#myTweet:hover {
position: absolute;
z-index: 6;
}
tweet.php:
Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
Link to demo website: ***** -- scroll down to Tweet button
This will be up only for so long, because I don't want people to have access like that <.<
Just going to rewrite my whole answer now the source code has been provided.
All "modern" versions of IE, when not in quirks mode, accept this code perfectly fine for divs and links. The problem in IE arises for iframes and other unusual elements, at which point its rendering engine seems to fail. (Shock!) You'll get this flickering for no apparent reason, except perhaps the conflicting doctypes in the iframe and page, which I would also try avoid if possible.
Presuming this link is generated by twitter, I would advise a fallback approach for IE. Instead of hovering between your button image and a twitter provided button image, I would just manipulate the css of the button twitter provided inside the iframe using javascript.
document.getElementsByTagName('iframe')[0].getElementsByTagName('a')[0].className += 'myTweetBrown';
The button looks to be generated by HTML5 rather than being a static image, so it shouldn't be difficult to manipulate:
.myTweetBrown:hover {
background-image: url('../images/tweetBrown.png') !important;
background-repeat: no-repeat !important;
background-position: center center !important;
height: 20px !important;
width: 55px !important;
}
.myTweetBrown:hover * {
display: none;
}
The other approach you could take is keep doing what you were doing before, but applying the styles differently like so, dependant on display:
#myTweetBrown {
position: absolute;
background-image: url('../images/tweetBrown.png');
background-repeat: no-repeat;
background-position: center center;
height: 20px;
width: 54px;
left: 381px;
top: 662px;
z-index: 5;
}
#myTweetBrown:hover {
opacity: 0;
}
#myTweet {
position: absolute;
height: 20px;
width: 54px;
left: 381px;
top: 662px;
z-index: 3;
}
Technically, CSS doesn't actually specify how and when elements go in and out of the "hover" state. So it sounds like when A goes under B, your version of IE removes the hover state from A and it immediately pops back in front of B, before B gets the hover state and pops further in front.
How about wrapping the two in a div, and testing for the hover state on that? Does that work?
http://jsfiddle.net/X64au/
Try wrap them in a div
.parent
{
position:relative;
z-index:1000;
}
.a
{
position: absolute;
z-index : 1001;
display: inline-block;
}
.b
{
position: absolute;
z-index: 1002;
display: inline-block;
}