I have been having trouble scaling an image with a shadow. On desktop screens the picture is fine but when it scales down to mobile the picture is too large and flows over other divs.
Can anyone please help scale this for mobile?
.img {
width: 330px;
height: 300px;
border: 2px solid #fff;
background: url(https://picsum.photos/330/300) no-repeat;
-moz-box-shadow: 10px 10px 5px #ccc;
-webkit-box-shadow: 10px 10px 5px #ccc;
box-shadow: 10px 10px 5px #ccc;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
}
<div class="img"></div>
Is this even the best way to put this type of image by just using mostly CSS?
Is this the sort of thing you are after?
Resize the window to see it in action.
#imageContainer{
position: relative;
height: auto;
width: 20vw;
}
.img {
height: 150px;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image: url(https://picsum.photos/330/300);
background-repeat: no-repeat;
background-position: center center;
border: 2px solid #fff;
-moz-box-shadow: 10px 10px 5px #ccc;
-webkit-box-shadow: 10px 10px 5px #ccc;
box-shadow: 10px 10px 5px #ccc;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
}
<div id="imageContainer">
<div class="img"></div>
</div>
Related
I am trying to make a div box with an background image for my website.
The div box itself works perfectly but there is no background image in it.
Anyone have an idea?
.box {
width: 600px;
height: 400px;
padding: 20px;
box-shadow: 0px 0px 10px 2px grey;
margin: 100px auto;
border: 10px solid red;
background-image: url(/img/header.jpg);
background-size: cover;
}
Try pointing to the absolute path:
.box {
width: 600px;
height: 400px;
padding: 20px;
box-shadow: 0px 0px 10px 2px grey;
margin: 100px auto;
border: 10px solid red;
background-image: url("http://www.website.com/img/header.jpg");
background-size: cover;
}
JSFIDDLE
Is there anyway to stop the background-image jumping when the input has focus.
A 2px border is added to the input when it gets focus but this causes the image to jump.
Adding background-attachment: fixed causes the image to disappear.
.search_box {
border: 1px solid #0065bd;
background-color: #fff;
background: url("http://png-5.findicons.com/files/icons/980/yuuminco/256/search.png");
background-size: 20px 20px;
background-repeat: no-repeat;
background-position: left;
padding-right: 20px !important;
padding-top: 2px !important;
padding-bottom: 2px !important;
padding-left: 5px !important;
height: 42px;
width: 100%;
padding: 6px 12px;
}
.search_box:focus {
background-color: #d9effc;
border: 2px solid #0065bd;
}
<input type="text" class="textbox search_box" name="keywords" />
first, define the background position for both dimension. I strongly recommend to do this in pixels. Then, on the focus-style, reset the background-position to -1px -1px to compensate the new extra border pixel.
.search_box {
[...]
background-position: 0 0;
}
.search_box:focus {
[...]
background-position: -1px -1px;
}
You can use box-sizing: border-box; on .search_box to make it stay the same size even with a bigger border, and margin-left: -1px;
on .search_box:focus to keep it in the same place.
.search_box {
border: 1px solid #0065bd;
background-color: #fff;
background: url("http://png-5.findicons.com/files/icons/980/yuuminco/256/search.png");
background-size: 20px 20px;
background-repeat: no-repeat;
background-position: left;
padding-right: 20px !important;
padding-top: 2px !important;
padding-bottom: 2px !important;
padding-left: 5px !important;
height: 42px;
width: 100%;
padding: 6px 12px;
box-sizing: border-box;
}
.search_box:focus {
background-color: #d9effc;
border: 2px solid #0065bd;
margin-left: -1px;
}
<input type="text" class="textbox search_box" name="keywords" />
Use box-shadow.
I usually generate mine with this generator: Box Shadow Generator
.search_box {
border: 1px solid #0065bd;
background-color: #fff;
background: url("http://png-5.findicons.com/files/icons/980/yuuminco/256/search.png");
background-size: 20px 20px;
background-repeat: no-repeat;
background-position: left;
padding-right: 20px !important;
padding-top: 2px !important;
padding-bottom: 2px !important;
padding-left: 5px !important;
height: 42px;
width: 100%;
padding: 6px 12px;
}
.search_box:focus {
background-color: #d9effc;
box-shadow: 0px 0px 0px 2px rgba(0,101,189,1);
}
<input type="text" class="textbox search_box" name="keywords" />
I want to make a background image to be seen over div. Anything that I've tried with z-index didn't helped me. Image itself has not standard shape and glowing border. As image ends ideally "logo2" should imitate that "glowing" by box-shadow parameter. But anything I've tried "logo2" always over "logo" crosses the image. This is how I want it to be like site.com/logo2.png
.logo {
background: url(site.com/logo.png) no-repeat;
height: 200px;
z-index:100;
position:relative;
}
.logo2 {
width: 100%;
height: 50px;
background-color: #000;
padding: 10px 0px 10px 0px;
border-radius: 10px;
border: 1px solid #7b0000;
box-shadow: 0px 0px 2px 2px #d09d00;
position:relative;
z-index:10;
<div class="logo">
<div class="logo2"></div>
</div>
I guess this is what you want. You can adjust width of .logo2 accordingly
.logo {
background: url(http://homeworld.su/logo.png) no-repeat;
height: 200px;
z-index:100;
position:relative;
}
.logo2 {
width: 20%;
height: 40px;
background-color: #000;
padding: 10px 0px 10px 0px;
border-radius: 10px;
border: 1px solid #7b0000;
box-shadow: 0px 0px 2px 2px #d09d00;
position:absolute;
top:10px;
left:495px;
<div class="logo">
<div class="logo2"></div>
</div>
I need to center div on my page. Dimensions are not fixed. Here is what I do to center it
background-image: url(../img/icon.png);
background-repeat:no-repeat;
background-size:cover;
border: 5px solid;
border-radius: 10px;
border-color: #ffffff;
box-shadow: 0 10px 6px -3px black;;
position: absolute;
height: 85%;
width: 82%;
top: 7.5%;
left: 9%;
And this works fine if I don't have a border property set. If I set it to lets say 5px div is not horizontally centered anymore. How can I fix this?
Add box-sizing: border-box;. So the border does not extend your div.
More box-sizing: css-tricks.com/box-sizing
try
margin-left:auto;
margin-right:auto;
also, box-shadow: 0 10px 6px -3px black;; should not have the 2nd semicolon.
Try this:
.yourclass{
background:url(../img/icon.png) no-repeat;
background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-0-background-size: cover;
border: 5px solid;
border-radius: 10px;
border-color: #ffffff;
box-shadow: 0 10px 6px -3px black;;
display: table;
margin: 0 auto;
height: 85%;
width: 82%;
vertical-align: middle;
Just saying: When you use background method, you don't need to type like: "background-image" with "background-repeat: no-repeat", you can just type like "background:url(...) no-repeat" - making it smaller and more organized.
How am I going to change my current input to div class? I would like to change my current user profile picture from the bottom design.
<input type="image" src="http://www.beirutnightlife.com/wp-content/uploads/2013/05/David-Beckham_89.jpg" name="image" width="85" height="85" data-toggle="modal" data-backdrop="static" href="#changepic" class="ttip_b thumbnail"></input>
<div class="round-pic2" style="background-image: url('http://www.beirutnightlife.com/wp-content/uploads/2013/05/David-Beckham_89.jpg');"></div>
CSS style
.round-pic2 {
display: block;
width: 100px;
height: 100px;
margin: 0em auto;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
border-radius: 99em;
-webkit-border-radius: 99em;
-moz-border-radius: 99em;
border: 0px solid gray;
box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
}
http://jsfiddle.net/yy6N5/
Try adding the class of the input type="image" as a selector:
.ttip_b, .round-pic2 {
display: block;
width: 100px;
height: 100px;
margin: 0em auto;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
border-radius: 99em;
-webkit-border-radius: 99em;
-moz-border-radius: 99em;
border: 0px solid gray;
box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
}
But I think, giving it an id attribute is better.
Cheers!
Just input{} or input[type="image"]{} will do:
Fiddle
input{
display: block;
width: 100px;
height: 100px;
margin: 0em auto;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
border-radius: 99em;
-webkit-border-radius: 99em;
-moz-border-radius: 99em;
border: 0px solid gray;
box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
}
Also you can add class on your input:
Fiddle
<input class="round-pic2" type="image" src="http://www.beirutnightlife.com/wp-content/uploads/2013/05/David-Beckham_89.jpg" name="image" width="85" height="85" data-toggle="modal" data-backdrop="static" href="#changepic" class="ttip_b thumbnail"></input>