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
Related
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>
I customize scrollbar by CSS3. And I don't know, how to make scrollbar-thumb smaller (shorter). Width or height don't work. Can anybody help me?
#parent {
width: 300px;
height: 300px;
padding: 20px;
overflow: auto;
}
#child {
width: 250px;
height: 1000px;
margin: 0 auto;
border: 2px solid #8c1b21;
}
#parent::-webkit-scrollbar {
width: 15px;
background-color: #B79889;
border-radius: 5px;
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
#parent::-webkit-scrollbar-thumb {
background-color: #8c1b21;
border-radius: 5px;
}
<div id="parent">
<div id="child"></div>
</div>
Height of thumb depends on the height of the div where you are applying scroll
#parent {
width: 300px;
height: 300px;
padding: 20px;
overflow: auto;
}
#child {
width: 250px;
height: 4000px;
margin: 0 auto;
border: 2px solid #8c1b21;
}
#parent::-webkit-scrollbar {
width: 10px;
background-color: #B79889;
border-radius: 5px;
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
#parent::-webkit-scrollbar-thumb {
background-color: #8c1b21;
border-radius: 5px;
}
<div id="parent">
<div id="child"></div>
</div>
I've come across a lot of methods for this very problem; the usual answer is create a div, make a custom scroll bar (don't), or don't bother. This is a solution I found previously to solve this problem:
border-top: 15px solid transparent;
border-bottom: 35px solid transparent;
background-clip: padding-box;
Basically surround the track with transparent thicc borders, ie. shorten the track.
This works for me, "::-webkit-scrollbar /width" is the key
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
::-webkit-scrollbar
{
width: 4px !important;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
background-color: $apple-gray;
}
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.
Hi im just starting out and i have a small problem, for some reason i cant get the header and the menuholder to align, the menuholder appears slightly below the header, i need it to be inside the header
#header {
max-height: 50px;
width: 100%;
background: url(../img/bgpattern.png) repeat-x;
position: fixed;
box-shadow: 0px 0px 10px 5px rgb(139, 141, 143);
z-index: 5;
}
#menuholder {
height:50px;
width: 900px;
margin-right: auto;
margin-left: auto;
}
thanks for any feedback.
Is this what you have in mind?
<div id="header">
<div id="menuholder">
This is my menu
</div>
</div>
#header {
max-height: 50px;
width: 100%;
background: url(../img/bgpattern.png) repeat-x;
box-shadow: 0px 0px 10px 5px rgb(139, 141, 143);
}
#menuholder {
text-align: center;
padding: 15px 0;
margin: 0 auto;
}