Here I'm trying to add an image so it fits completely into a div#image-container. I'm using CSS styles:
background-repeat: no-repeat;
background-size: cover;
which helps to fit the width correctly into the div, but not the height. How do I fix this?.
I've added the snippet below:
#image-container {
width: 90%;
height: 350px;
border: 13px solid gold;
box-sizing: border-box;
margin-left: 5%;
margin-top: 18px;
box-shadow: 0px 0px 7px 3px #000;
/*position: relative;*/
background-image: url(https://i.stack.imgur.com/Aixcp.jpg);
background-repeat: no-repeat;
background-size: cover;
}
<div id="image-container">
</div>
background-size: 100% 100%; solved the problem
#image-container {
width: 90%;
height: 350px;
border: 13px solid gold;
box-sizing: border-box;
margin-left: 5%;
margin-top: 18px;
box-shadow: 0px 0px 7px 3px #000;
/*position: relative;*/
background-image: url(https://i.stack.imgur.com/Aixcp.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
<div id="image-container">
</div>
Related
I have a div with a background image that I am trying to give a transparent type border to.
Currently, this works for the side borders but the top and bottom borders do not fill with the image. How would I achieve this?
.picture-div {
background: url(https://www.princeton.edu/sites/default/files/styles/half_2x/public/images/2022/02/KOA_Nassau_2697x1517.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: 25px solid rgba(100, 100, 100, .50);
width: 200px;
height: 200px;
border-radius: 60px;
}
<div class="picture-div" />
Add background-origin to border-box, so the image will fill the border.
You can read the detail in : https://www.w3schools.com/cssref/css3_pr_background-origin.asp
.picture-div {
background: url(https://www.princeton.edu/sites/default/files/styles/half_2x/public/images/2022/02/KOA_Nassau_2697x1517.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-origin: border-box;
border: 25px solid rgba(100, 100, 100, .50);
width: 200px;
height: 200px;
border-radius: 60px;
}
<div class="picture-div" />
You can use border on the pseudo :before of the picture-div class as follows:
.picture-div {
background: url(https://www.princeton.edu/sites/default/files/styles/half_2x/public/images/2022/02/KOA_Nassau_2697x1517.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
width: 200px;
height: 200px;
border-radius: 60px;
}
.picture-div:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 25px solid rgba(100, 100, 100, .50);
border-radius: 60px;
}
<div class="picture-div" />
#Preface I am relatively new to HTML and CSS if this has been answered elsewhere I would appreciate direction to something that gives me a solution.
Below is the code I have, I want the .Divclass to appear infront of my backround element with it's red background.
* {
background-image: url(https://www.pixelstalk.net/wp-content/uploads/2016/05/Treugolnik-triangle-illuminati-Wallpapers-High-Resolution.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: 1960px 1080px;
}
.divclass {
height: 230px;
width: 300px;
margin: 0px;
padding: 0px;
color: red;
border: solid 1px rgb(253, 253, 253);
text-align: center;
font-size: x-large;
}
Check the below snippet. The div is in front of the background image with a red background.
Let me know if this is what your desired output is
section {
background-image: url(https://www.pixelstalk.net/wp-content/uploads/2016/05/Treugolnik-triangle-illuminati-Wallpapers-High-Resolution.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: 1960px 1080px;
padding: 10px;
}
.divclass {
height: 230px;
width: 300px;
margin: 0px;
padding: 0px;
background-color: red;
border: solid 1px rgb(253, 253, 253);
text-align: center;
font-size: x-large;
}
<section>
<div class="divclass">Hi</div>
</section>
*{
background-image: url('https://www.pixelstalk.net/wp-content/uploads/2016/05/Treugolnik-triangle-illuminati-Wallpapers-High-Resolution.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: 1960px 1080px;
}
.divclass {
height: 230px;
width: 300px;
/*color: red; This only makes the text color red */
background: #f00;
border: solid 1px rgb(253, 253, 253);
display: flex;
align-items: center;
justify-content: center;
font-size: x-large;
}
<div class=divclass> Hi </div>
Note the display: flex that was added to center the text, rather than using text: center which won't center it vertically.
I have a div that has an image as a background-image, I need to set a linear gradient box-shadow but it can't get two background-image.
I need something like the below image
my Html code is:
<div class="top-container"></div>
css:
.top-container {
position: relative;
min-height: 632px;
background-position: bottom;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: auto;
padding-top: 25px;
background-image: url("/assets/images/homepage-images/header-desk-bg-img.jpg");
}
I need just gradient shadow from top to bottom of the below image
You can do this by adding box-shadow property.
I do not know what values you should give to it, but this is an excellent tool where you can play with box-shadow values to set it up the way you like the most.
https://www.cssmatic.com/box-shadow
So, by the end of your trying you will end up with something like this:
.top-container {
position: relative;
min-height: 632px;
background-position: bottom;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: auto;
padding-top: 25px;
background-image: url("/assets/images/homepage-images/header-desk-bg-img.jpg");
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
You can use ::after if you want to apply a linear-gradient.
.top-container{
width: 50px;
height: 50px;
margin: 20px;
background: cyan;
}
.top-container::after{
position: absolute;
content: '';
display: block;
width: 50px;
margin-top: 50px;
height: 10px;
background: linear-gradient(to bottom, #ccc, transparent);;
}
<div class='top-container'></div>
The CSS property box-shadow can also do the work.
.top-container{
width: 50px;
height: 50px;
margin: 20px;
background: cyan;
box-shadow: 0 0 10px grey;
}
<div class='top-container'></div>
Am sure that I am doing something stupid, but cannot figure out how to get the contents of a DIV to fully render in front of another DIV that has a masked background.
See sample here: https://jsfiddle.net/pLwbsqjv/
What I am trying to do is to get the circle to fully display in front of the green circle that is a masked background.
The only constraint is that the circle with the number in it cannot be positioned absolutely as needs to have its width / height set on a % basis, eg: percentage of the outer container.
Anyone tell me what I am doing wrong?!
Thanks
body {
background: #252526;
}
.ontop {
margin: -50% 0 0 0;
border-radius: 50%;
width: 22%;
height: 22%;
padding: 10px;
background: rgb(34, 51, 68, .5);
border: 2px solid #def;
color: #def;
text-align: center;
font: 30px Arial, sans-serif;
}
.bounds {
width: 200px;
height: 200px;
}
.color-circle {
-webkit-mask: url('https://perlmaven.com/img/circle.svg') no-repeat center;
mask: url('https://perlmaven.com/img/circle.svg') no-repeat center;
background-color: #26bf75;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
width: 100%;
height: 100%;
}
.bottom {
height: 80%;
width: 100%;
}
<div id="bounds" class="bounds">
<div class="bottom">
<div class="color-circle"></div>
</div>
<div class="ontop">01</div>
</div>
You can add position: relative and z-index to .ontop:
body {
margin: 0;
background: #252526;
}
.ontop {
position: relative;
z-index: 1;
margin: -50% 0 0 0;
border-radius: 50%;
width: 22%;
height: 22%;
padding: 10px;
background: rgb(34, 51, 68, .5);
border: 2px solid #def;
color: #def;
text-align: center;
font: 30px Arial, sans-serif;
}
.bounds {
width: 200px;
height: 200px;
}
.color-circle {
-webkit-mask: url('https://perlmaven.com/img/circle.svg') no-repeat center;
mask: url('https://perlmaven.com/img/circle.svg') no-repeat center;
background-color: #26bf75;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
width: 100%;
height: 100%;
}
.bottom {
height: 80%;
width: 100%;
}
<div id="bounds" class="bounds">
<div class="bottom">
<div class="color-circle"></div>
</div>
<div class="ontop">01</div>
</div>
Note:
Regarding this comment:
The only constraint is that the circle with the number in it cannot be
positioned absolutely as needs to have its width / height set on a %
basis, eg: percentage of the outer container.
Position absolute would have worked as well. You need to designate the container for the absolutely positioned element. To do so, the container must have any position that is not static. In this example I've added position relative to .bounds:
body {
margin: 0;
background: #252526;
}
.ontop {
position: absolute;
z-index: 1;
margin: -50% 0 0 0;
border-radius: 50%;
width: 22%;
height: 22%;
padding: 10px;
background: rgb(34, 51, 68, .5);
border: 2px solid #def;
color: #def;
text-align: center;
font: 30px Arial, sans-serif;
}
.bounds {
position: relative; /** this sets the container **/
width: 200px;
height: 200px;
}
.color-circle {
-webkit-mask: url('https://perlmaven.com/img/circle.svg') no-repeat center;
mask: url('https://perlmaven.com/img/circle.svg') no-repeat center;
background-color: #26bf75;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
width: 100%;
height: 100%;
}
.bottom {
height: 80%;
width: 100%;
}
<div id="bounds" class="bounds">
<div class="bottom">
<div class="color-circle"></div>
</div>
<div class="ontop">01</div>
</div>
hi guys i'm new to html and css
i wanted to create 4 backgrounds one at top one at left one at bottom and one at right... but somehow the one at right doesn't show up and the other work fine
can you help me?
HTML:
<div class="header">
</div>
<div class="leftheader">
</div>
<div class="rightheader">
</div>
<div class="bottomheader">
</div>
CSS
body {
background-color: #efefef;
margin: 0px auto;
font-family: arial
}
.header{
background: #cccccc;
background-position: top;
background-repeat: no-repeat;
background-attachment: fixed;
border: 0px solid #000000;
width: auto;
height: 60px;
}
.leftheader {
background: #cccccc;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left;
border: 0px solid #000000;
width: 100;
height: 590;
}
.rightheader {
background: #cccccc;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right 10px top 10px;
border: 1px solid #000000;
width: 100;
height: 590;
}
.bottomheader {
background: #cccccc;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom;
border: 0px solid #000000;
width: auto;
height: 60px;
}
The key to getting this to work is using float: left and float: right on your .leftheader and .rightheader elements. Then you need to clear your floats by putting clear: both on the .bottomheader.
body {
background-color: #efefef;
margin: 0px auto;
font-family: arial
}
.header {
background: #cccccc;
background-position: top;
background-repeat: no-repeat;
background-attachment: fixed;
border: 0px solid #000000;
width: auto;
height: 60px;
}
.leftheader {
background: #cccccc;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left;
border: 0px solid #000000;
width: 100px;
height: 590px;
float: left;
}
.rightheader {
background: #cccccc;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right 10px top 10px;
border: 1px solid #000000;
width: 100px;
height: 590px;
float: right;
}
.bottomheader {
background: #cccccc;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom;
border: 0px solid #000000;
width: auto;
height: 60px;
clear: both;
}
<div class="header">header</div>
<div class="leftheader">leftheader</div>
<div class="rightheader">rightheader</div>
<div class="bottomheader">bottomheader</div>