Here is my code.
HTML:
<div id="socmed">
<div id="icons">
<div id="fb"></div>
</div>
</div>
CSS:
#socmed {
height: 100px;
padding-top: 70px;
padding-bottom: 50px;
background-color:rgba(247, 34, 34, 0.7);
width: 100%;
}
#icons {
width: 300px;
height: 75px;
margin: 0px auto;
}
#fb {
height: .89in;
width: .89in;
background-image:url("../images/facebook_dark.png");
}
#fb:hover {
height: .89in;
width: .89in;
background-image:url("../images/facebook_active.png");
Currently, neither logo shows up in my "socmed" div. Anyone know what I'm doing wrong? Stumped.
check the following steps:
1.Image contains folder path (inspect the path)
2.If image size is big it won't appear full image.so it will appear partial image according the mentioned dimension.for that problem use background-size property
Take a look :DEMO
Related
Here is my jsfiddle code.
<div class="gallery-thumbnail">
<a href="google.com">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/13Vend%C3%A9miaire.jpg/1024px-13Vend%C3%A9miaire.jpg" />
</a>
</div>
.gallery-thumbnail {
display: flex;
max-width: 400px;
align-items: center;
justify-content: center;
overflow: hidden;
background: silver;
}
.gallery-thumbnail a { /* This magic makes a square, because the padding % is of the element's width. */
height: 0;
padding-bottom: 100%;
}
.gallery-thumbnail img {
position: relative;
object-fit: cover;
width: 100%;
background-color: green;
}
https://jsfiddle.net/hgw7s9qf/
I spent a while searching around how to make an element square for all screen sizes, and then some more time trying to set a not-perfectly-square image inside that area. I am finding I can't have everything at once.
How can I get that image to fit-fill the square responsively, the way one would expect object-fit: cover to work, yet still maintain the area as a dynamically-resizing square?
Important: I need this to be responsive, so the square shrinks as the window does, and the image inside should too.
I found a way.
I am not really sure why it works, exactly. Maybe one of you brilliant people can help with that.
.gallery-thumbnail {
position: relative;
width: 100%;
padding-bottom: 100%;
}
.gallery-thumbnail img {
position:absolute;
object-fit: cover;
width:100%;
height:100%;
}
https://jsfiddle.net/7f13rnvu/
I'm not entirely sure what your end goal is but with the same markup, I got this to work:
.gallery-thumbnail {
max-width: 400px;
background: red;
}
.gallery-thumbnail img {
display: block;
object-fit: cover;
width: 100%;
height: 400px;
}
After reading this, I think that the image needs both width and height for object-fit to work its magic as it's fitting within the image sizing.
Hope that helps.
To make an image properly square you need to specify same height and width for the image. You can try like this
<div class="square">
<div class="content">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/13Vend%C3%A9miaire.jpg/1024px-13Vend%C3%A9miaire.jpg" alt="">
</div>
</div>
.square {
border: 5px solid red;
text-align: center;
width: 50vw;
height: 50vw;
}
.content {
}
.content img{
height: 50vw;
width: 50vw;
}
Working Fiddle
Square Image
My apple-pie-icons image in CSS is not responding to any height attribute. It responds to width, but not height.
Could I be including it in the wrong div?
I've tried using pixels and height percentages - no response.
What am I doing wrong?
HTML
`<div class="container">
<div>
<div>
<img src="images/apple-pie.jpg" alt="Apple Pie" styling="width: 100%; height: 400px">
<h1>Apple Pie</h1>
</div>
<div id="description-container">
<div id="Apple-pies">
This was my grandmother's apple pie recipe. I have never seen another one
quite like it. It will always be my favorite and has won me several first place
prizes in local competitions. I hope it becomes one of your favorites as well!
</div>
<div class="apple-pie-icons">
<img src="images/recipe-info.png">
</div>
</div>
</div>
`
CSS
* {
font-family: Arial, Verdana, monospace;
}
.container {
width: 80%;
}
img {
position: relative;
width: 100%;
height: 500px;
}
h1 {
position: absolute;
top: 175px;
color: white;
width: 100%;
left: 32%;
font-size: 300%;
}
#description-container{
width: 650px;
height: 800px;
margin: 50px 200px 0px 200px;
}
#Apple-pies {
}
.apple-pie-icons{
display: inline-block;
height: 100px;
float: left;
width: 80%;
}
The icon is an image, and your CSS is defined as
img {
position: relative;
width: 100%;
height: 500px;
}
If you want to change the height, you can either change the height attribute there, or give the image a class and change the height that way (change the image tag to <img class="apple-pie-image" src="images/recipe-info.png"> and style via .apple-pie-icons .apple-pie-image { height: 1000px; }), or set the height of the image itself to 100% and then change the height of the parent, which is .apple-pie-icons in this case.
You also have this image (<img src="images/apple-pie.jpg" alt="Apple Pie" styling="width: 100%; height: 400px">) which has an inlinewidth and height style in the tag. It's worth noting that this image will not respond to height or width styles defined in your CSS since the inline styling will overwrite any other CSS.
It's possible that your image is growing the div even though you don't want it to in order to maintain it's aspect ratio. Try adding a more specific class to limit the images size or inspect in your browser to see what is overriding the divs styles.
Try targeting the image itself with the height style.
Right now you're just setting a height to the wrapping div:
.apple-pie-icons {
display: inline-block;
height: 100px;
float: left;
width: 80%;
}
Try...
.apple-pie-icons img {
height: 100px;
max-width: 100%;
}
or something like
.apple-pie-icons img {
height: 100%;
width: auto;
}
Any way to specifically target the image within the div that you're wanting to style.
Most likely a css problem, the images I'm using as backgrounds for each page are repeating & varying in size. The homepage is the only completely functional section.
Here's a live example: http://athenatestingwebsite.tumblr.com/
And here's my html:
<div id="PROJECTSP">
<a id="projects" class="smooth"></a>
</div>
<div id="CONTACTP">
<a id="contact" class="smooth"></a>
</div>
and here's some of my css:
body {
height: 1000px;
}
#projectsp {
height: 1000px;
width: 100%;
background-color: #0a0b38;
display: inline-block;
text-align: center;
background: url("http://i.imgur.com/rrmPP7E.png");
}
#contactp {
height: 1000px;
width: 100%;
height: 100%;
background-color: #0a0b38;
display: inline-block;
background: url("http://i.imgur.com/s9gGzHO.png");
}
background-repeat-y: no-repeat;
add this line after every background image you set. remove
body height,width remove all #id height 1000px or 2000px you set..set height auto.
add this class
div.slogan h1 {
margin: auto;
}
hope all will be fix. without the nav overlay.
Happy Coding . Good luck
I'm working on a page in html. I was able to include an image in a box but I don't know why it is not visible. Should I have to include it somewhere? It is in the directory with all the others images of the project. Here is the view in my page
And here is my code:
HTML
<div id="LibraryContent"style="text-align:center;">
<div id="adbox">
<img src="../images/thriller.jpg" align="left" style="width:100px;height:100px" />
</div>
<section class="container">
<nav>
<style>
div {
height: 650px;
width: 850px;
padding: 3px;
border: 3px solid;
vertical-align: middle;
}
</style>
</nav>
</section>
</div>
CSS:
#LibraryContent {
background: transparent;
vertical-align: top;
display: table-cell;
padding: 8px 0 0;
position: fixed;
top: 10%;
left: 50%;
margin-top: -50px;
margin-left: -300px;
}
#adbox {
width: 840px;
height: 150px;
margin-top: -9px;
background-color: dimgrey;
}
As I had some problem posting the code I take away the body part. Hope you can help me. It is just a bug or maybe something with the type of the image. All the images are in the directory ../Web/Music/images. I'm not using javascript (just to be precise)
according to the above shown image the problem is related to the path
try to check that the path is correct or not
check that the file type you used is correct or not
check the case of file like you used thriller.jpg instead of Thriller.jpg
My website is: kienanh.vn
When I'm testing cross browser I'm having trouble with Safari.
Any position I set: width: abc px; is not working in Safari? How do I fix it?
You can access my site with safari to see it!
My markup is:
<div id="wak">
<div id="quangcao1">
<div id="slider1"></div>
<div id="slider2"><div>
<div id="slider3"><div>
</div>
</div>
CSS:
#wak {
background-color: #FFFFFF;
margin: 0 auto;
max-width: 1000px;
}
#quangcao1 {
height: 345px; // i don't set width for this elem
}
#slider1, #slider2, #slider3 {
background-color: #F5F5F5;
float: left;
height: 335px;
padding: 5px;
}
#slider1 {
margin-top: 3px;
width: 490px;
}
#slider2, #slider3 {
width: 240px;
}
Now my issue is: convert px to em http://pxtoem.com/ I'm trying do it. I think it work!
You should validate your HTML - http://validator.w3.org/ - and fix any errors found. For example, id's need to be unique. You have multiple elements all with the id=wak. consider changing this to a class. This may resolve your issue.