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!
Related
I am a novice as best please pardon me, but I'm learning.
I can illustrate what I need with an image.
Vertical Navigation 'White Curved Tab as Selector':
This is my CSS now, it's vertical and I can rotate the text, the way it should be, I'm not too concerned now about the visual appearance, I just need to have the functionality..
I would like the title of the pages in the navigation bar, to have an overlay icon, SVG or png, to hover over it when the mouse moves over and to continue following the mouse cursor within in the bounds of the nav bar, not like an ordinary overlay image, and if page is selected to leave that image or icon there as the highlight, so the final result will look something like the image above.
Here is my CSS thus far:
`.body{}
`.mobile-menu-nav.moved {
max-width: 75px;
width: 75px`
}
#head{
min-width: 100%;
padding:0px;
margin-left: -200px;
margin-right: -200px;
position:cover
}
#main-wrapper{
min-width: 100%;
padding:0px;
margin-left: -200px;
margin-right: -200px;
position:cover
}
.menu {
width: 60px;
height: 100%;
position: left;
border-radius: 15px;
border: 1px solid #00F;
}
.mobile-menu-nav li a {
font-family: Arial, sans-serif;
font-size: 12px;
color: #FFF;
background-color: transparent;
width: 100px;
height: 22%;
border: 1px solid transparent;
margin: auto;
margin-top: 50%;
margin-bottom: 50%;
margin-left: -15px;
position: center;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}
-o-transform: rotate(-90deg);
`
https://sproutsa.co.za
Thanks much.
I think it would be the best to use ::after or ::before
.mobile-menu-nav li a:after {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background: transparent url('../images/your_image.svg') no-repeat;
background-size: contain;
background-position: center;
}
I have added background size and position, but ofcourse style it as you need it. Using this solution you can manipulate images using background properties.
Second similar solution is:
.mobile-menu-nav li a {
display: flex;
}
.mobile-menu-nav li a::after{
content: url('../images/your_image.svg');
width: 20px;
padding-left: 8px;
}
SVG should contain itself inside after element, like background-size: contain; so it works fine, but it won't work for images (.png, .jpg) and you can't change those. You can only prepare .png image to be final size.
Use ::after or ::before depending on position you want icons to be, right or left.
I want to have some list elements that got a dynamically adjusting height via css.
For better understanding: I am inserting via ::before a number that I count via counter-increment (thats the big ones)
Problem is that nothing that I tried so far brings me even close to what i want to archive. If you change the window size everything gets shoven down...
It should look like this:
I tried:
clear: both; on every element (except the li)
height: auto; on every element
I've already read through some posts but nothing really worked for me.
Dont ask why am I trying to get it done with css... ;)
Thanks for any help!
You have an absolute positioning on your image and thumbnail wrapper which is causing huge problems, look at the adjusted CSS below:
.page-id-3606 .product_thumbnail_wrapper .product_thumbnail a img {
position: relative;
clear: both;
}
.page-id-3606 .product_thumbnail a::before {
counter-increment: section;
content: "0" counter(section) "";
font-size: 10em;
font-weight: bold;
position: relative;
/* top: 100px; */
/* left: 50%; */
line-height: 0;
height: 100px;
width: 100%;
text-align: center !important;
box-sizing: border-box !important;
text-transform: uppercase;
color: #464646;
display: block !important;
border-bottom: 3px solid #464646;
/* transform: translate(-50%, 0); */
margin: 0 !important;
z-index: 10 !important;
}
I fixed it with a little help from Rich.
the missing height and top was causing the trouble:
.page-id-3606 .product_thumbnail_wrapper::before {
content:'';
background: url('...');
height: 130% !important;
width: 100%;
position: absolute;
z-index: 1;
clear: both;
top: -65px;
}
Please review my Fiddle Sample.
Click on a calendar day with an event (orange square).
You'll notice that the date box, is at the bottom of the window.
In the stylesheet, there's a snippet like this...
.calendar *{
-moz-box-sizing:border-box;
box-sizing:border-box;
vertical align: top;
behavior: url(pie/PIE.htc);
}
...the vertical-align: top; should bring that box to the top of the window, but it doesn't.
If you add vertical-align: top; to the stylesheet in Chrome, then it works fine.
Not sure why this is... Thoughts?
I seems to be a height issue. Remove height: 100%; from .calendar .c-specific
.calendar .c-specific {
position: absolute;
width: 100%;
height: 100%; <<< Remove this
left: 0;
top: 0;
display: none;
padding: 1em;
behavior: url(pie/PIE.htc);
}
This is the line you need to change:
.calendar .c-holder .c-grid .c-row .c-day .date-holder {
font-size: 1.3em;
position: absolute;
right: 5%;
bottom: 5%; /*** CHANGE THIS TO TOP ***/
behavior: url(pie/PIE.htc);
}
I'm trying to use CSS divs to add images to my site. I'm using background-image:url(""); but the image doesn't appear when loading the site.
The images I'm referencing are in the same folder as my style.css, and I quadruple-checked that I wrote the file names correctly.
Any help is very much appreciated. Thank you.
CSS:
div#logo {
background-image:url(dm-button2.png);
height: 120px;
width: 120px;
position:absolute;
z-index: 100;
background: blue; /* #333333; */
padding: 0px;
margin: 0px auto;
display: inline;
}
HTML: (Am I missing something here?)
<div id="logo">
</div>
div#logo {
background:url(dm-button2.png) blue;
height: 120px;
width: 120px;
position:absolute;
z-index: 100; /* #333333; */
padding: 0px;
margin: 0px auto;
display: inline;
}
try this, your second background is rewriting the first
use this:
div#logo {
background-image:url(dm-button2.png);
height: 120px;
width: 120px;
position:absolute;
z-index: 100;
background-color: blue; /* #333333; */
padding: 0px;
margin: 0px auto;
display: inline;
}
Try replacing Background image and background with something like this
background: blue url('dm-button2.png') no-repeat fixed center;
I am not 100% sure but i think having background-image followed by background, background will overwrite the background-image call since it loads in order
example FIDDLE HERE
start small and add the other attributes.
div#logo {
height: 120px;
width: 120px;
background:url(http://flyingmeat.s3.amazonaws.com/acorn4/images/Acorn256.png) 0 0;
}
The background image will not display if there is nothing to put a background image on... for example, all you have a div tags but nothing inbetween them.
Add at least a br tag or something to create some space for the image to be displayed.
I'm pulling in a tumblr feed using tumblr's code, and using after: to add an image as a separator between posts. I'd like to center the image, but haven't had luck doing so. Since tumblr's generating the content, not me, I don't think I can use span tags, which seems to be the usual answer. Any other ideas?
Page showing feed in use: lumn.net/index.shtml
CSS:
.tumblr_post:after {
content: url(../img/flower.png);
display: block;
position: relative;
margin-top: 42px;
margin-bottom: 24px;
margin-left: auto;
margin-right: auto;
}
Try this:
.tumblr_post:after {
content: url("../img/flower.png");
display: block;
margin: 42px auto 24px;
position: relative;
text-align: center;
width: 100%;
}
While the answer from Zoltan Toth works, it's got a bunch of code that does nothing for the desired effect. This should do the trick and with less code.
.tumblr_post:after {
content: url("../img/flower.png");
display: block;
text-align: center;
}
Here is a working solution on all screens :
.produit-col .img-produit::after{
content: '';
background: url("../img/icone.png") center no-repeat;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: none;
}