I've searched on a lot of topics and I didn't found the solution...
I'm just trying to scale my image to fit into my div but it isn't.
HTML :
<div class="slideshow-image slideshow-active">
<img src="assets/images/securityBreach1.png">
</div>
CSS :
.slideshow-image {
text-align: center;
display: none;
overflow: hidden;
margin: 0 auto;
}
I've already tried to play with max-width/height, width/height and object-fit:content but nothing seems work.
Here's the website page if you want (see the slideshow part) :
Thank you in advance !
Have you tried adding the following?
.slideshow-image img{
width:100%;
height:auto;
}
Does that help?
Related
I am learning HTML and CSS. But this thing is getting on my nerves. I have tried everything to solve this thing but unable to do so. I am practicing with a sample website.
Main issue i Am trying to apply this logo which I marked under a rectangle above two ".divs". Sorry I am newbie and don't know how to properly. I am attaching my coding below of css.
I need to put those two divs below this image.
I am newbie so don't know how to paste code. This thing is new for. please any help would be appreciated. enter link description here
Okay, Well its hard to see without the images actually being included on the codepen.
I've gone through your code and eliminated the syntax errors/spelling mistakes etc and made it abit cleaner, so hopefully it will work for you, if not if you can provide images on the codepen it would make it alot easier.
HTML:
<body>
<div class="image">
</div>
<div id="wrapper">
<header>
<div class="headerbox1"></div>
</header>
<div class="banner">
<div class="headerbox2"></div>
</div>
</div>
</body>
</html>
CSS:
body {
background:#BCBCBC;
}
#wrapper {
height:2278px;
width:1600px;
background:#ABFF7E;
margin: 0 auto;
}
header{
width:1600px;
height:57px;
background:#FF1D21;
margin: 0 auto;
}
.headerbox1{
width:1600px;
height:57px;
background:#EDE8E9;
margin: 0 auto;
}
}
.banner{
width:1600px;
height:559px;
background:url(../../Images/alpha.jpg);
}
.headerbox2{
width:1600px;
height:63px;
background:rgba(0,0,0,0.4);
margin: 0 auto;
}
.image {
width:219px;
height:185px;
background:url(../../Images/logo%20spotless.png);
display: inline-block;
margin: 0 auto;
}
I could see no relevant reason for you to use the <td> tags in your html, especially as you don't have a table in there, so i have took them out.
Hope this helps, If not your need to provide images aswell.
anyone know how to solve this problem:
The image of the example overboard the image-wrapper that contain it.
It works correctly if it's smaller or change "max-height:40vw" to "height:40vw", but both solutions are bad for me.
What I'm trying it's to get that image responsive in different resolutions ( desktop to laptop, for mobile I have a different design ), like here: http://goo.gl/yRo5OE (deviantart)
The website where I'm trying to implement: http://goo.gl/AAF4U7
Thank you, if you have another solution for this please tell me.
.image-wrapper {
display:flex;
justify-content:center;
max-height:40vw;
background:#141414;
}
.image-wrapper img {
height:100%;
width:auto;
}
<div class="image-wrapper">
<img src="http://webbiter.com/project/tattoobiter.com/wp-content/uploads/2015/06/skull-with-rose.jpg">
</div>
just remove the height:100% from css
.image-wrapper {
display:flex;
justify-content:center;
max-height:40vw;
background:#141414;
}
.image-wrapper img {
width:auto;
}
<div class="image-wrapper">
<img src="http://webbiter.com/project/tattoobiter.com/wp-content/uploads/2015/06/skull-with-rose.jpg">
</div>
Please see if the following helps-
img{max-width:100%; width:auto; vertical-align: top;}
OR
http://jsbin.com/guwicolora/edit?output
I am wondering if any of you have any tricks to make this happen, or if I'm completely overthinking this.
I have MANY images being used and the most efficient (and easiest) way to make these images show up is to use the CSS background:url("link"); property where link is the proper link to my image file. This prevents cluttering of my html files as well.
The issue is that the above code is found in over 50 different ids, each pointing to a different image and I need to resize the images, however I would REALLY like to not have to put the following code under each and every id.
background-size:180px 239px;
background-repeat:no-repeat;
To put this simply:
I have CSS that looks something like this...
My "ID"s
#image1
{
background:url("../Images/image1.png");
}
#image2
{
background:url("../Images/image2.png");
}
#image3
{
background:url("../Images/image3.png");
}
My class
.myClass
{
width:180px;
height:239px;
background-size:180px 239px;
background-repeat:no-repeat;
}
Note that by entering this code all will seem normal, however if you change the values in background-size (say to 100px 239px you will notice the issue that I am experiencing)
And a typical use of this in html would be as the following:
<div id="image1" class="myClass"></div>
A jsfiddle of this issue can be found here: jsfiddle
The anticipated result is shown under the text in the fiddle.
How would I go about coding this so that it remains clean?
I would like to note that I am trying to keep my CSS and JS separate. I am looking for a purely CSS way for coding this. I need control of all the id's background-properties from one single location.
Any help with this is greatly appreciated, thank you.
Change background to background-image and it will work :)
#image1
{
background-image:url("http://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Bolognese_Image.jpg/180px-Bolognese_Image.jpg");
}
#image2
{
background-image:url("http://www.phy.duke.edu/~kolena/Recommended.gif");
}
.myClass
{
width:180px;
height:239px;
background-size:100px 239px;
background-repeat:no-repeat;
border:2px solid red;
}
/*------------------------------------*/
#thisIsWhatIWantItToLookLike
{
background-image:url("http://www.senoja.nl/images/mainecoons/galleryxamina/xamina1.jpg");
background-size:100px 239px;
background-repeat:no-repeat;
}
.mySadClass
{
width:180px;
height:239px;
border:2px solid blue;
}
<div id="image1" class="myClass"></div>
<div id="image2" class="myClass"></div>
<p>This above images should show up like the one below does, squished</p>
<div id="thisIsWhatIWantItToLookLike" class="mySadClass"></div>
background-size: 100px 239px !important;
background-repeat: no-repeat !Important;
Add these two properties to your class
DEMO
i have two images of text. one with regular text and the other with the same text but with glow effect.
the thing is i want the glow image to replace the regular one while hover.
but instead the glow image appears in addition to the regular one.
please help!!
thanx in advance
here is the code... the background-image attribute is in a comment block because the regular text image is defined as the img src int the html file
#groundPlainLink
{
height:56px;
width: 170px;
margin-left:476px;
float:left;
/*background-image:url("../images/txt_menu_ground_plane_pc.png");*/
}
#groundPlainLink:hover
{
background-image: url("../images/txt_menu_ground_plane_glow_pc.png");
}
It appears in addition, because the IMG element renders above the background image. Why not just use CSS, and skip the IMG element?
You have to hide the image on hover.
#groundPlainLink img:hover { opacity:0; }
However, as mentioned above, it'd be easier and simpler to remove the img and rely on background images for this.
EDIT: Or, style the element instead of the div element, then put text inside the link with a font-size:0. That'd do what you're looking for and still be good for screen readers/accessibility/SEO.
a fiddle
https://jsfiddle.net/Hastig/jd23mcnx/
html
<a class="image-link">
<img class="image-default" src="http://i.imgur.com/c0lfxLU.png">
<img class="image-hover" src="http://i.imgur.com/yfNIfVR.jpg">
</a>
css
.image-link {
display: block;
width: 500px;
margin: 20px auto 0px auto;
}
.image-link img {
width: 500px; height: 300px;
}
.image-hover {
display: none;
}
.image-link:hover .image-default {
displaY: none;
}
.image-link:hover .image-hover {
display: block;
}
I would like the top half of this image to display by default, and then use some CSS to make the image shift upward so that the bottom half shows when the mouse hovers over it. Here is the code and what I've tried, but it is not working. Can anyone help me make this code work?
HTML:
<div id="next">
<img src="images/next3.png" alt="next page">
</div>
CSS:
#next a:hover{background: url('images/next3.png') 0 -45px;}
EDIT:
HTML:
<div id="next">
</div>
CSS:
#next {
height:40px;
width:160px;
background-image:url('images/next3.png');
}
#next:hover{background-position: 100% 100%;}
I think you need to use background-position attribute to achieve this.
CSS
div
{
height:40px;
width:160px;
background-image:url('http://i.stack.imgur.com/OOGtn.png');
}
div:hover
{
background-position:100% 100%;
}
JS Fiddle Example
You can also look into CSS Sprites.
You need to use it as a background in the first place. The <img> is covering the background.
Get rid of the image HTML and just use some CSS like this
a {
display: inline-block;
height: 40px;
width: 160px;
background: transparent url(img.jpg) 0 0 no-repeat;
}
a:hover {
background-position: 0 40px;
}
In this case you will need to remove your <img> tag and consistently use the CSS background attribute for both cases. Also define your height and width width of your a tag with CSS too.