I have a nav to which I want to add a background image, because if I add the normal image it screws up the flex, and I wanted it to be repeated but only around the edges. I don't know if there is any way to achieve this.
My current code:
nav {
border-width: 1px;
border-style: solid;
height: 50px;
background-color: #333;
overflow: hidden;
display: flex;
justify-content: space-evenly;
/*background-image: url(../Imagenes/navmusic.png);*/
/*bogus img used for the snippet here*/
background-image: url(https://pixabay.com/get/gbcda7058a3885ac11a062304ad9ba8647e6c3457ba65616142693813b48ad64d1b61c96e7a19f19e0a5611ce600767961015c603d8c3dcc524b690b66394d497a42e9f1f38c9fcc70f56bd0b5933aaea_640.jpg);
background-size: 20%;
background-position-x: right;
background-position-y: -20px;
background-repeat: no-repeat;
}
<nav class="nav">
<a class="active" href="#home">Home</a>
Formulario
</nav>
I have tried to add it as a normal image but I don't know how to use the flex very well yet and it gives me problems since it counts it as an element of the flex and in the end I can't do what I want.
That's what I have and I would like the image to be repeated just on the other side.
You could do :
background: url("https://pixabay.com/get/gbcda7058a3885ac11a062304ad9ba8647e6c3457ba65616142693813b48ad64d1b61c96e7a19f19e0a5611ce600767961015c603d8c3dcc524b690b66394d497a42e9f1f38c9fcc70f56bd0b5933aaea_640.jpg") left ,url("https://pixabay.com/get/gbcda7058a3885ac11a062304ad9ba8647e6c3457ba65616142693813b48ad64d1b61c96e7a19f19e0a5611ce600767961015c603d8c3dcc524b690b66394d497a42e9f1f38c9fcc70f56bd0b5933aaea_640.jpg") right;
Also instead of using background-size: 20%; and background-position-y: -20px;, you could use background-size: contain;.
nav {
border-width: 1px;
border-style: solid;
height: 50px;
background-color: #333 !important;
overflow: hidden;
display: flex;
justify-content: space-evenly;
background: url("https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg") left ,
url("https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg") right;
background-size: contain;
background-repeat: no-repeat;
}
<nav class="nav">
<a class="active" href="#home">Home</a>
Formulario
</nav>
Related
body{
display: flex;
background: url("images/benzo.jpg") no-repeat center;
height: 100vh;
color: #fff;
min-height: 500px;
background-size: contain;
background-attachment: fixed;
}
This is the code sample where I inserted the background image
background-size: cover is what you want to cover the entire page with your image:
body{
display: flex;
background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/800px-Image_created_with_a_mobile_phone.png") no-repeat center;
height: 100vh;
color: #fff;
min-height: 500px;
background-size: cover;
background-attachment: fixed;
Regarding your nav bar, I'm not entirely sure how you have your HTML set up, but you could do something along these lines. It's not pretty, so don't judge me lol.
Essentially, you could just put your <a> tags in a div and then set the text-align property for said div to right. See below:
body {
display: flex;
background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/800px-Image_created_with_a_mobile_phone.png")
no-repeat center;
color: #fff;
background-size: cover;
background-attachment: fixed;
}
div.nav{
background: #fff;
width: 100%;
}
div.links{
text-align: right;
}
.a-color {
color: #007bff;
text-decoration: none;
display: inline-block;
font-size: 2vw;
padding: 15px;
overflow: hidden;
word-spacing: -2px;
letter-spacing: 4px;
cursor: pointer;
transition: .2s;
}
.a-color:hover{
color: darkblue;
}
<div class="nav">
<div class="links">
<a class="a-color">TEXT</a>
<a class="a-color">TEXT</a>
<a class="a-color">TEXT</a>
<a class="a-color">TEXT</a>
</div>
</div>
I'm trying to make the image fill the size of my div (300x300px) but it sits in the corner of it. Any help would be great. Thank you
Here is my HTML
<script id="arty-template" type="text/x-handlebars-template">
<section class="myboard">
{{#each items}}
<a href={{external_urls.spotify}} target="_blank">
<div class="boardimage" style="background: url({{images.2.url}}) no-repeat 100% 100%; ;" title="{{name}}"></div>
</a>{{/each}}
</section>
</script>
Here is my CSS
.boardimage {
position: relative;
margin: 39px auto;
width: 300px; height: 300px;
border-radius: 100%;
background-size: cover;
background-position: center center;
float: left;
}
This is what's happening here
This is without no-repeat
I've tried adding height and width to the HTML but it just makes the image disappear.
I have copied your text and removed the handlebar code, and used an image from unspash.com. It seems to be working fine, although the code can be improved a lot.
Maybe there's an issue with the image itself. Check if the image renders correctly.
.boardimage {
position: relative;
margin: 39px auto;
width: 300px; height: 300px;
border-radius: 100%;
background-size: cover;
background-position: center center;
float: left;
}
<a href="" target="_blank">
<div class="boardimage" style="background: url(https://images.unsplash.com/photo-1626246914215-4046df064c1f?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60) no-repeat 100% 100%; ;" title=""></div>
</a>
I tried like this and seems working:
.boardimage {
width: 200px;
border-radius: 100%;
background-size: cover;
background-position: center center;
float: left;
}
How do I set a fixed size of a background image?
I set the width and height right now but when I increase or decrease my browser window image gets blocked. How can Ifix that?
Image will be blocked slowly when I decreased window size:
Here is my code :-
.bg{
height: 600px;
width: 100%;
border-bottom-left-radius: 80%;
border-bottom-right-radius: 80%;
background-image: url("/assets/images/interview.jpg");
background-size: cover;
display: flex;
justify-content: center;
}
A couple of new lines. Added comments on them.
.bg{
height: 600px;
width: 100%;
border-bottom-left-radius: 80%; /*I'd remove this and edit the original photo*/
border-bottom-right-radius: 80%; /*I'd remove this and edit the original photo*/
background-image: url("https://i.pinimg.com/originals/3b/8a/d2/3b8ad2c7b1be2caf24321c852103598a.jpg");
background-size: contain; /*From cover to contain*/
background-position: top !important; /*New - Can change to center*/
background-repeat: no-repeat !important; /*New*/
display: flex;
justify-content: center;
}
<div class="bg">
</div>
You need to set the position of you bg component to fixed
You new CSS class will look like this:
.bg{
height: 600px;
width: 100%;
border-bottom-left-radius: 80%;
border-bottom-right-radius: 80%;
background-image: url("/assets/images/interview.jpg");
background-size: cover;
display: flex;
justify-content: center;
//modifications
background-repeat: no-repeat;
position:'fixed';
top:0;
left:0;
}
This question already has answers here:
Centering a background image, using CSS
(13 answers)
Closed 3 years ago.
I am trying to add an image inside button and want to align it center for that I have given background-position as a center but it's still aligning right. Can anyone suggest to me how should I align it in the center?
demo.html
<html lang="en">
<head>
<link rel="stylesheet" href="demo.css">
<title>Document</title>
</head>
<body>
<button class="closeIconRegion"> <span class="closeIconStyle"> </span></button>
</body>
</html>
demo.css
.closeIconRegion {
position: relative;
overflow: hidden;
width: 30px;
height: 30px;
background: Orange;
}
.closeIconStyle {
cursor: pointer;
display: block;
height: 25px !important;
width: 25px !important;
background-position: left;
background-image: url(/images/closebtn_white.png);
float: left;
}
output::
If you know the height and width of the image/button, then you can use background-position: center in the button itself and that would solve in your case.
.close-icon {
width: 60px;
height: 60px;
background: Orange;
background-image: url(https://via.placeholder.com/60);
background-position: center;
}
<button class="close-icon"></button>
If you don't know the size of the image/button then I'd suggest using flexbox with alignment in the center.
try this:
.closeIconRegion {
position: relative;
overflow: hidden;
width: 30px;
height: 30px;
background: Orange;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.closeIconStyle {
cursor: pointer;
display: block;
height: 25px !important;
width: 25px !important;
background-position: center;
background-image: url(/images/closebtn_white.png);
}
If the button's dimensions are not the same as those of the image, you should set background-size: cover to the style rules:
button{
background-image: url(https://placekitten.com/408/287);
background-position: center;
background-size: cover;
height: 239px;
width: 500px;
}
<button></button>
I have the following image frame:
and now i have several images which all should have that frame as a background. If i for example have this image:
i want the result to be the following:
i want the background image frame always to have the same size (for example 300 * 400) and i want the picture for the frame to be centered inside the frame and i want the overhang to be cut off.
i set this css for the background:
.pola {
margin-left: auto;
margin-right: auto;
background-position: center center;
background-image: url("../img/frames/frame_01.png");
background-size: contain;
background-repeat: no-repeat;
}
but i have no idea how to go on from here. How can i do that?
Here you go, any image you put will fit inside parent frame.
.pola {
margin-left: auto;
margin-right: auto;
background-position: center center;
background-image: url("http://i.stack.imgur.com/Q4NJZ.png");
background-size: contain;
background-repeat: no-repeat;
width: 400px;
height: 486px;
position: relative;
}
.pola img {
width: 92%;
height: 85%;
position: absolute;
top: 10px;
left: 0;
right: 0;
margin: auto;
}
<div class="pola">
<img src="http://lorempixel.com/600/800/sports/Dummy-Text/" />
</div>
You can create a similar layout by using a border and box-shadow around the image.
.frame {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-image: url("http://placehold.it/500x300");
background-position: -100px center;
border-color: #e8e8e9;
border-image: none;
border-style: solid;
border-width: 20px 20px 100px;
box-shadow: 0 0 5px gray;
height: 320px;
width: 320px;
}
<div class="frame"></div>
.pola {
margin: 0 auto;
background: url("../img/frames/frame_01.png") no-repeat fixed top center;
}
That is short way to write the code you already have. If you want the frame over the other image you would just put the the image after the frame url() like this:
.pola {
margin: 0 auto;
background: url("../img/frames/frame_01.png"), url("../img/this image is behind the frame") no-repeat fixed top center;
}
Hope this helps.