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 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
I have a CSS file that has code looking like this...
.button{
width: 700px;
height: 100px;
text-align: center;
display: inline-block;
font-size: 50px;
font-family: Gauge;
color: white;
border: rgba(255,255,255,0.3) 11px solid;
box-shadow: 0 5px 10px white;
text-shadow: 0 0 10px #000;
margin: 15px 15px 15px 15px;
transition: 0.4s
}
button.oneshot{
background: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.4),rgba(0,0,0,1)) no-repeat center center fixed,
url("oneshot.png") center 60%;
button.lisatp{
background: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.4),rgba(0,0,0,1)) no-repeat center center fixed,
url("lisa the painful.jpg") 45% 60%;
}
...
...
As you can see, there is a line that is repeated in the subclasses oneshot and lisatp:
linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.4),rgba(0,0,0,1)) no-repeat center center fixed
However, since each subclass also has an image as the background as well, I can't find a way to place the repeated line in .button.
Is it possible to somehow simplify this even more, or is this as simple as it is going to get?
Use CSS variable to simplify this then you will be able to easily change the gradient for all the element of each one individually:
.button{
width: 700px;
height: 100px;
text-align: center;
display: inline-block;
font-size: 50px;
font-family: Gauge;
color: white;
border: rgba(255,255,255,0.3) 11px solid;
box-shadow: 0 5px 10px white;
text-shadow: 0 0 10px #000;
margin: 15px 15px 15px 15px;
transition: 0.4s;
--grad:linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.4),rgba(0,0,0,1)) no-repeat center center fixed;
background:var(--grad);
}
.button.oneshot{
background:var(--grad),url("https://lorempixel.com/400/200/") center 60%;
}
.button.lisatp{
background: var(--grad),url("https://lorempixel.com/300/200/") 45% 60%;
}
.button.new-grad{
--grad:linear-gradient(rgba(0,190,0,1),rgba(0,190,0,0.4),rgba(0,180,0,1)) no-repeat center center fixed;
background: var(--grad),url("https://lorempixel.com/300/200/") 45% 60%;
}
<span class="button"></span>
<span class="button oneshot"></span>
<span class="button lisatp"></span>
<span class="button new-grad"></span>
I'm trying to add shadow to the parent object where an child <img> element is positioned inside it. I wan the inset shadow to overlap the image.
My HTML code is:
<section class="highlights">
<img src="images/hero.jpg" alt="" />
</section><!-- End section.highlights -->
and CSS:
.highlights {
height: 360px;
padding: 0;
position: relative;
overflow: hidden;
opacity: 0.9;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:1;
}
.highlights img {
height: auto;
width: 100%;
margin: 0 auto;
display: block;
position: relative;
}
.highlights {
-webkit-box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2);
box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2);
}
The shadow is not appearing for me. What did I do wrong?
The problem is that the image is rendered over the top of the inset box-shadow.
There are 2 possible ways I can think of doing this, one using opacity on the <img> to push it behind the shadow and the second way to position the inset shadow over the top of the image. I prefer the second approach because the full opacity of the image can be retained.
Note: I have made the border large and red for demonstration.
Solution 1 demo
HTML
<section class="highlights">
<img src="http://lorempixel.com/500/360/city/1/" alt=""/>
</section>
CSS
.highlights {
height: 360px;
padding: 0;
position: relative;
overflow: hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.highlights img {
height: auto;
width: 100%;
margin: 0 auto;
display: block;
opacity: .9;
}
.highlights {
-webkit-box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2);
box-shadow: inset 0 0 25px 25px red;
}
Solution 2 demo
CSS
.highlights {
height: 360px;
padding: 0;
position: relative;
overflow: hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.highlights img {
height: auto;
width: 100%;
margin: 0 auto;
display: block;
}
.highlights::before {
-webkit-box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2);
box-shadow: inset 0 0 25px 25px red;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
}
I have 3 divs. I am trying to place the #cover div behind the #cover-overlay div which should be behind the #user-stuff div. I can't seem to get my z-index to work quite right. What am I doing wrong?
JSFIDDLE: http://jsfiddle.net/BafSL/1/
My CSS:
#cover {
position: relative;
height: 350px;
width: 920px;
/* background: url('http://images.nationalgeographic.com/wpf/media-
live/photos/000/621/cache/praia-dos-tres-irmaos-beach-portugal_62194_990x742.jpg') no-
repeat center center; */
background: url('https://sphotos-b.xx.fbcdn.net/hphotos-
ash4/486464_10150990114607410_529660447_n.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index: 0;
}
#cover-overlay {
position: absolute;
top: 0px;
-webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
background-attachment: scroll;
background-clip: border-box;
background-color: rgba(0, 0, 0, 0);
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0,
0.54902) 100%);
background-origin: padding-box;
background-size: auto;
bottom: 50px;
color: rgb(51, 51, 51);
display: block;
font-family: Arial, sans-serif;
font-size: 14px;
height: 200px;
line-height: 16px;
position: absolute;
text-align: center;
text-shadow: rgb(255, 255, 255) 0px 1px 0px;
width: 100%;
z-index: 10;
}
#user-stuff {
margin: 0px 0px 0px 0px;
padding: 40px 0px 20px 10px;
height: auto;
width: 400px;
z-index: 20;
}
z-index only works on positioned elements, so you need to add a position to your user-stuff div.
#user-stuff {
margin: 0px 0px 0px 0px;
padding: 40px 0px 20px 10px;
height: auto;
width: 400px;
position:relative;
z-index: 20;
}
jsFiddle example
There is no position in #user-stuff:
#user-stuff {
margin: 0px 0px 0px 0px;
padding: 40px 0px 20px 10px;
height: auto;
width: 400px;
z-index: 20;
position: relative;
}