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;
}
Related
My background-image is not showing on my div element. Background-color works just fine, but using an image doesn't show.
.scifititle {
width: 50%;
position: absolute;
top: 1080px;
left: 350px;
}
.scifibg {
background-image: url(images/stars.gif);
margin-top: 1200px;
width: 1280;
height: 276px;
}
<div class="scifibg">
<img class="scifititle" src="images/sci-fi-title.png" alt="">
</div>
Your Background image not showing - maybe the image location is wrong. I checked your CSS code, I think you did some wrong CSS.
Please try this HTML & CSS code. I hope it will help you perfactly.
<div class="scifibg">
<img class="scifititle" src="https://lh3.googleusercontent.com/p4M1mK1Lbtc2tt54b6JUQUJ5U8RcwHnEAPH7_87X2NH9Rc8N9ek0Xm2BUq_wmLuOWXlylcDlZFOg4xF3aQtwsyF9frOHoqiQdWVpG-v4VO-Jb_4lIQ" alt="Google Map Mark Icon">
</div>
.scifibg {
width: 100%;
height: 100vh;
padding: 100px 0;
text-align: center;
background-size: auto;
background-repeat: no-repeat;
background-position: center center;
background-image: url(https://i.pinimg.com/originals/31/00/ec/3100ecd92a583cb03dec1f7be1fa0924.png);
}
.scifititle {
max-width: 570px;
display: inline-block;
}
I am trying to adjust my logo at the center of the webpage, but whenever I adjust it in my CSS file, the background is getting affected by the changes so there will be white spaces on top.
.bgimage {
width: 1903px;
height: 1000px;
background-image: url(https://drive.google.com/uc?id=1ZtitWTmH3qglyS7uv4X32GDQv35fmhwG);
background-attachment: fixed;
background-size: cover;
margin-top: 60px;
display: block;
}
.bgimage .ETLOGO {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 80px;
width: 40%;
height: 50%
}
<div class="bgimage">
<img src="https://drive.google.com/uc?id=1vXkFqCQzC7sagYCBOuAwDQMf-uhJTmAo" class="ETLOGO">
</div>
Here is a photo of my website.
I think what you wanted was padding at the top of the logo, instead of margin. Try this:
.bgimage {
background-attachment: fixed;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/0/0f/MOS6581_chtaube061229.jpg);
background-position: center;
background-size: cover;
height: calc(100vh - 50px);
width: 100vw;
}
.bgimage .ETLOGO {
display: block;
height: 50%;
margin: 0 auto;
padding-top: 40px;
}
<div class="bgimage">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Intel-logo.svg/440px-Intel-logo.svg.png" class="ETLOGO">
</div>
I have a background image half the page, and I have a div underneath it which I also want to put a quarter of it above the background image. I tried to put padding-top on the profile class but it doesn't work whilst wrapping background-pic and profile in a div.
CSS:
.background-pic{
background-image: url('https://images.pexels.com/photos/825262/pexels-photo-825262.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
height: 60%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(0,0,0,0);
}
.profile{
padding-top: 300px;
}
HTML:
<div class="background-pic">
</div>
<div class="container">
<div class="profile" style="background-color: grey; height : 300px;">
<div class="profile-pic">
</div>
</div>
</div>
You can apply a negative margin-bottom to the first element.
.background-pic {
background-image: url(https://www.placecage.com/600/400);
height: 400px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-bottom: -100px;
}
.content {
padding-top: 300px;
background: rgba(10, 150, 10, .4);
}
<div class="background-pic"></div>
<div class="content">Profile content</div>
All you need to do is put a negative margin on the .profile element. I cleaned up your HTML and CSS so you could follow this:
.background-pic{
background-image: url('https://images.pexels.com/photos/825262/pexels-photo-825262.jpeg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 500px;
width: 100%;
}
.profile{
background-color: pink;
height: 500px; /* optional if you put enough content in */
margin: -100px auto 0 auto;
padding: 25px 50px;
width: 600px;
}
<div class="background-pic"></div>
<div class="profile">
Content goes here.
</div>
Demo:
https://codepen.io/staypuftman/pen/QrNZPz
In CSS of the .background-pic add a property position : absolute.
In CSS of the .profile add property position : relative, then change the padding of text inside .profile according to your need.
I am using a plugin that allows me to create sliders. The images I upload are dynamically inserted as <img> tags into the front page layout. While I know how to render an image in its full height using CSS, I am unable to get this to work with the html image element.
This code works great if the image is served by CSS and the result is perfect.
HTML
.container{
width: 750px;
height: 600px;
background: rgba(222,211,210,1);
border: solid 4px #8c8c8c;
}
.slider{
background-image: url('https://i.imgur.com/Ye4Uugc.jpg');
width: 100%;
height: 100%;
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
}
<div class="container">
<div class="slider">
</div>
</div>
But the problem I have is when the image is inside HTML like this. I cannot meddle with the HTML code as the plugin inserts the image tags dynamically and I have more than 500 images inserted by the plugin.
HTML
.container{
width: 750px;
height: 600px;
background: rgba(222,211,210,1);
border: solid 4px #8c8c8c;
}
.slider{
width: 100%;
height: 100%;
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
}
<div class="container">
<div class="slider">
<img src="https://i.imgur.com/Ye4Uugc.jpg">
</div>
</div>
The result for the above code is this. Obviously overflow: hidden; clips the lower part exceeding the container height, which is not the solution I want as I need the image to fit inside the container retaining its original ratio.
Any help is appreciated.
add rules to images also to prevent overflow:
.container{
width: 750px;
height: 600px;
background: rgba(222,211,210,1);
border: solid 4px #8c8c8c;
}
.slider{
width: 100%;
height: 100%;
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
}
.slider img{
max-width:100%;
max-height:100%;
height:auto;
}
<div class="container">
<div class="slider">
<img src="https://i.imgur.com/Ye4Uugc.jpg">
</div>
</div>
I'm remake code from #Ali Sheikhpour. adding width: 100%; to .slider img
.container{
width: 750px;
height: 600px;
background: rgba(222,211,210,1);
border: solid 4px #8c8c8c;
}
.slider{
width: 100%;
height: 100%;
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
}
.slider img{
max-width:100%;
max-height:100%;
height:auto;
width: 100%;
}
<div class="container">
<div class="slider">
<img src="https://i.imgur.com/Ye4Uugc.jpg">
</div>
</div>
I have an image that I am using inside a Div.
I was wondering how I could center the image both vertically and horizontally at all times.
At the moment, when I stretch it, it seems to be stretching from the top left corner, is there a way I could have it centered at all times.
I have searched the web and tried various things but can not seem to get it to work.
this is my html:
<div class="container"></div>
here is my css:
.container {
width: 100%;
height: 75vh;
background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
Any help or advice is appreciated, thank you in advance.
EDIT you can see that when I stretch the browser, it
seems to be stretching from the left, i want to be able to have the
Image centered so it stretches from all sides equally*
I got the solution..!
Here is your html file :
<div class="container"></div>
CSS file :
.container {
width: 100%;
height: 75vh;
position: absolute;
margin: auto;
background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
top: 0;
left: 0;}
Here is working demo
background-position: center will align your image in vertical and horizontal center.
Check below snippet:
* {
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100vh;
background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
background-repeat: no-repeat;
background-position: center;
}
<div class="container"></div>
.container {
width: 100%;
height: 75vh;
background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-size:auto;
}
<div class="container"></div>
HTML :
<div class="container"></div>
CSS :
.container{width: 100%;height: 75vh;position: absolute;margin: auto;background-image: url("http://i.stack.imgur.com/2OrtT.jpg");background-size: cover;background-repeat: no-repeat;background-position: 50% 50%;top: 0;left: 0;}