Hi please check the photo below, what im doing is i want to have a background image below the slider with the fix size
Css Code
.swiper-slider-bg {
background: url('http://localhost/wordpress/wp-content/uploads/2017/11/bg-08-1.png');
background-size: auto 100%;
}
Current code
What I need to have
Define it in pixels instead of percentage. Or, as a much flexible alternate, you may also use pseudo to achieve the same.
:before or :after selector shall be useful for you. I am hoping that you know how to use these selectors so not explaining that stuff.
I think this is you need to want, refer below links for your use, It will be use your full page image slider.
https://www.w3schools.com/w3css/tryit.asp? filename=tryw3css_slideshow_self
https://codepen.io/jibbon/pen/BoisC
Related
I have the following Squarespace website. You can login to the site by clicking visitor access and typing in the code.
I'd like to change the background of the website by using the followng background image:
https://hethuisvandelingerie.squarespace.com/assets/bgs/bg8.png
I tried to do this with a CSS code to add a background image to the div with ID "canvas". This is the code I used:
#canvas{background-image: url('assets/bgs/bg8.png');}
However, this code does not seem to add the background image?
Any of you have an idea on how to solve this issue?
Take a look on your main wrapped on your #canvas div. Try to use the same CSS code. Hope it helps!
main {
background: url(https://static1.squarespace.com/static/ta/58639728d2b857b308f66598/404/assets/bgs/bg8.png)
}
In site.css, look for this entry and remove the background line from #main. You've applied the background image to #canvas but #main is displaying over #canvas and #main's background is covering the background image applied to #canvas
#main {
background: #fcfcfc;
...
Try removing the single quotes from the path
#canvas{background-image: url(assets/bgs/bg8.png);}
If that doesn't work
Make sure that you entered the right path.
Double check that the id of the element is in fact canvas
(I personally think it's a less than optimal name since canvas is now also a class)
I'm looking for a way, using only modern css, to select all elements which have a background-image which utilizes any sort of gradient and then overwrite that value with 'none'. Essentially, I need to wipe out all background gradients. This is what I have so far but it doesn't seem to work:
*[background-image*="gradient"]{
background-image: none !important;
}
I'm starting to think that attempting something like this is not sane, but I'd like to know for sure. Is this even possible? If so, what am I doing wrong?
You cannot solve this problem using HTML and CSS.
You could use Javascript to check the background-image of every element in the DOM. With a huge DOM this can become slow, but seems like you have no other choice.
How about this method. you only have to add the class gradient for all those elements which are using gradient effect. I understand its a bit of work but it will solve your problem.
*[class*='gradient'] {
background-image: none;
}
DEMO LINK
As you can see on the link above I am trying to change the image when mouse hover but it's not working atm. What should I change? The parent <div> already has one hover on it.
.preview a img:hover{
background-image:url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Solid_yellow.svg/200px-Solid_yellow.svg.png');
}
You are trying to change the background-image css on an <img> tag.
This will not change the "src" attribute.
in order to do that, you will need a JavaScript solution.
using jQuery:
$(".preview a img").hover(function(){
$(this).attr("src","new-image.jpg")
});
EDIT: if you're using CSS3, and it's ok for you that not all browsers will support it, you can do:
.preview a img:hover{
content:url("new-image.jpg");
}
EDIT 2:
working fiddle - http://jsfiddle.net/j3xDR/
EDIT 3:
due to requests that it will work via a parent div, here is a full example with both options:
http://jsfiddle.net/j3xDR/1/
As Shay Elkayam's answer suggested, you can use the content property in modern browsers to achieve this.
If browser support is a problem, then i suggest using a <div> instead if the <img> tag and change the divs background property on hover.
here's a working fiddle
update:
if you want to change the image on hover of the parent div, modify the css selector as in this working : fiddle
As per the HTML code the CSS is not matching:
using .preview a img will be wrong as you are calling the img tag in side the a tag in your CSS.
However your HTML says that you have img tag inside the div class=preview and a tag is above all.
There are multiple ways to achieve the output. One of the easiest way is as follows:
EDIT: As per the comment the edited script was posted as below:
$(".preview").hover(function() {
$(this).find("img").attr("src", "http://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Solid_yellow.svg/200px-Solid_yellow.svg.png")
}, function() {
$(this).find("img").attr("src", "http://upload.wikimedia.org/wikipedia/commons/b/b3/Solid_gray.png")
})
Please jQuery in your HTML and write the above script, if you are not using CSS3.
Fiddle Demo is also modified
You could do the same thing in css as well if you do a little bit of modifications in your css
Check this updated fiddle
http://jsfiddle.net/gw6w9/1/
Here in .preview img rule, I set the height to 45px as well since, the actual image is 200px x 200px and you have set the width as 45px meaning it will scale the height to 45px as well and I set the background-image to the initial image as well. so when it loads the grey image is loaded.
I also modified your rule .preview a img:hover to .preview:hover img because
1) I don't see an a under .preview
2) You hover over the div anyway.
under this rule you can set the background-image to the new url.
Hope this works for you
As per related answers given by others, i have modified a small change without any extra javascript nor css. It works in all versions
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAABJklEQVR4Ae3VPYrbUBRA4a+RJ1VSJswvGG8mhYsswRhtxT/YmNEuhtEiAmpcJjBJOQsYyyBMsF0qXcjDjNF7pAnJOd0tTqN3r/yLfPCsFfrsvUje+ao91RdvRfBGpX3Fzy6c4UKh0Ua6U+gJKLSJFgKa5FAjoE23W6hRWpp4UKeHNnIZgMzIS0rom1shXHqKDW3cgoHC2tq9PriyiQvl4JPjr8nBEIxjQo0MA8dguneHTN09VL7ySBfgsXtoCdYnoQpMu4cmZ0Oz7qEHcH8SmoOye6iWoe8QTH+4QWYb8/lHYGj/W+YjyOPe0YtLcGehUpm7Adfq2BV5coWQa9/TlnYcLG2uTj8jtUdTM6VtxBlJNGCXnGn+1PFfCegl/Y4aKz1/Lf/5CShXgVKz4A8DAAAAAElFTkSuQmCC" onmouseover="this.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACrElEQVR42u2Xz2sTQRSAX8VSb1K8iNqKooJH2Ux6Ksn+iPQqxZMIehJB0do/IMhmQWsvHr2KSEGk0tSLIoWIYNUKij20F2/N7iaUZnYT0kYzzhMKs0HDJiTdLcwHDwKZSd63781LBiQSSW9JZdkhzfKm1Rz9mjZp/W9YdEU3vXv4HsQZ40FtNG36q5rls//Ej4tmbSS2T15Mvp3ExOPmEMQNbBtMMEyoljcFcQN7PqyAlqNfIG7gYQ0tYNIaxA1MrJPY3wImbUqBKAXSFv0tBSIVMOkvKRDtGKWN/T6FdqRAxFNoWwpEPIXqUqBT6ALU/UVgu8GW4GD3f6f9TRDYNJTDrk7YbtiqUumHwIYoUJuHERDAS0r4CvgFECgbY+cFAR7KT+g1POmCKFDNw6WggHc3fBtVb4CAoyauBgXIG+g1Xh5mRAGah6cggBd11fK/h7lOprIs0H6uRl6KAo5O7kOv4QmPiwJ4Jqqv4FiwCtXjvD2+tRmfK6kZ/ygI2HritK0rDVGgrClJ6DWMwYC/AGuCBMYcIC2V0CzvjmbRz3j3xUjn6CfeYreUJ2wQkGD75INPX1mFfsEFrrcIYCvdhC4paWQakxajpJMr0C9YFg54i7AsClRmh9/xnr0NHcInzZStk2aLwAcGMAD9pPIazvFKVDD5rdnhJeHLX5RTyRPQHpz5o66emMc9wdlPtvA8wF7Aq2BUHh1525qEo5JtR1WeOXpickO9cJIpyuD6xJmhYiZ5ytWSl3mlnuOaf+2zDaLDXmJrSgZ/MYVEugo+gSh+FkSBa4yd5Ul87DZ5XpFl/AyIEjzYjkau8WqshU2cr13HPbgX4gJOD97n465GZlyVvC9mSKloKI2iTnbwNT+gBX54H+IaXAtxJzE3ycSAFqSAFJACUkAikXD+AHj5/wx2o5osAAAAAElFTkSuQmCC'" onmouseout="this.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAABJklEQVR4Ae3VPYrbUBRA4a+RJ1VSJswvGG8mhYsswRhtxT/YmNEuhtEiAmpcJjBJOQsYyyBMsF0qXcjDjNF7pAnJOd0tTqN3r/yLfPCsFfrsvUje+ao91RdvRfBGpX3Fzy6c4UKh0Ua6U+gJKLSJFgKa5FAjoE23W6hRWpp4UKeHNnIZgMzIS0rom1shXHqKDW3cgoHC2tq9PriyiQvl4JPjr8nBEIxjQo0MA8dguneHTN09VL7ySBfgsXtoCdYnoQpMu4cmZ0Oz7qEHcH8SmoOye6iWoe8QTH+4QWYb8/lHYGj/W+YjyOPe0YtLcGehUpm7Adfq2BV5coWQa9/TlnYcLG2uTj8jtUdTM6VtxBlJNGCXnGn+1PFfCegl/Y4aKz1/Lf/5CShXgVKz4A8DAAAAAElFTkSuQmCC'" border="0" alt=""/>
DEMO
http://jsfiddle.net/ssuryar/wcmHu/468/
I'm not sure if I the title's correct, so feel free to edit it to something more descriptive.
How to, if there's a way to, read the width/height of an background-image image and pass it to width/height property of that element in CSS (without the use of JavaScript)?
So, since I think the question is still confusing, I'll best provide an example:
element {
background: url(image.png);
width: auto;
height: auto;
}
I know the above example doesn't work, but I was wondering if there is something similar to it that might.
Thanks!
P.S: I can do it in JS, so posting a JS solution won't be necessary.
There is no way to do this with only CSS.
I'm not sure what else there is to say.
It is impossible - workaraound is to put there img , set overflow to hidden, and put second div in with position relative ( it some setup to fit it all, but it works )
I recently had an idea for using the CSS pseudo-class :hover to display a styled tooltip when the mouse is hovered over a link.
The basic code for the link looks like this:
.hasTooltip {
position:relative;
}
.hasTooltip span {
display:none;
}
.hasTooltip:hover span {
display:block;
background-color:black;
border-radius:5px;
color:white;
box-shadow:1px 1px 3px gray;
position:absolute;
padding:5px;
top:1.3em;
left:0px;
max-width:200px; /* I don't want the width to be too large... */
}
This link has a tooltip!<span>This is the tooltip text!</span>
The result is exactly what I want, but with one annoying problem: the span does not expand to accommodate text, and if I don't specify a width, the text is squashed.
I did some searching on Google, found a couple examples of work people had done (this example is creepily similar to what I've gotten), but no one seems to have addressed the span width problem I'm having.
I know this answer is extremely late, but it appears the key to your issue would be to use:
white-space: nowrap;
inside of your span, and get rid of any sort of width definition. Of course the drawback to this will be that the tooltip will only be able to support a single line. If you want a multiline solution you will most likely have to use javascript.
Here is an example of of this method:
http://jsbin.com/oxamez/1/edit
An added bonus is that this works all the way down to IE7. If you do not need to support IE7, I would suggest folding the span, and img styles into a :before, and :after for the .tooltip. Then you can populate the text using the data-* attribute.
I don't think there's a perfect solution to this problem with pure CSS. The first problem is that when you place the span inside the a tag the span only wants to expand as far as the width of the link. If you place the span after the the a it's possible to get close to what you're trying to do but you'll have to set the margin-top: 1.3em and then have to set a negative margin to slide the tooltip left. However, it's going to be a fixed setting so it won't sit exactly at the start of each link.
I whipped up a jQuery solution that sets left dynamically (and a nice little fade effect for good measure).
Demo: http://jsfiddle.net/wdm954/9jaZL/7/
$('.hasTooltip').hover(function() {
var offset = $(this).offset();
$(this).next('span').fadeIn(200).addClass('showTooltip');
$(this).next('span').css('left', offset.left + 'px');
}, function() {
$(this).next('span').fadeOut(200);
});
These tool tips can also be integrated into a word press theme easily. Just copy the CSS into your style. Css file and when creating your posts, just take help of the HTML code and create your own tool tips. Rest is all styling, which can be altered according to your own choice. You may also use images inside the tool tip boxes.
http://www.handycss.com/how/how-to-create-a-pure-css-tooltip/
Even though this question is a bit older already, I would suggest the following compromise:
Just use max-width: 200px; and min-width: 300%; or so,
whereas the min-width could result higher than the max-width.
Just figure it out.
This way you could not have entirely liquid tooltips but the width would stand in kind of a correlation with the width of the containing link element.
In terms of optical pleasantness this approach could be of value.
edit:
Well I must admit it is nonsense what I wrote. When the min-width can be higher than the max-width, there is no sense to it.
So just putting the min-width in percent would achieve what I tried to suggest.
Sorry for that.
I found this and it was working for me. It's a good solution when you have a lot of elements and jquery plugins on the same page and you can't work with
Text <span>Tooltip</span>
View pure CSS solution: JS BIN
Credit to trezy.com