I have image on jsx/html page that is div:
<div className="card-row-image" style={getBackgroundImage(thumbnail)} />
Problem is cus in css class height and width are 68px but when I open application, on page width is lower then 68px
You can check the screenshot:
Css part of code:
.card-row-image {
height: 68px;
width: 68px;
border-radius: 4px;
margin-right: 10px;
background-size: cover;
background-position: center center;
}
Why with of image is not 68px?
The inline style provided in getBackgroundImage(thumbnail) has a higher priority than the CSS rules linked to the class. You have a couple of options:
Change getBackgroundImage to allow specifying another size (not 'thumb')
Apply the inline style, but remove the width and height from it:
const { width, height, ...styleWithoutSize } = getBackgroundImage(thumbnail)
<div className="card-row-image" style={styleWithoutSize} />
Change the order of priority with !important
.card-row-image {
height: 68px !important;
width: 68px !important;
border-radius: 4px;
margin-right: 10px;
background-size: cover;
background-position: center center;
}
Related
So I'm trying to make it so that a full page image shows in the page, and resizes responsively on different screens so that it always takes up the whole screen. I looked it up on w3schools and other questions on Stack, but it seems that no matter what I do it never works, I checked if something is overriding my CSS in the browser developer tools but it seems there is nothing wrong, it just simply doesnt work. I'm using bootstrap and the div which background image should be full page is a col-12, would that cause the problem? This is my css:
body, html {
height: 100%;
}
#image-div {
background-image: url("paper.jpeg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
color: white;
background-color: rgba(0,0,0,0.5);
background-blend-mode:darken !important;
font-size: 20px;
}
and the html:
<div className="row" id="calculator-row">
<div className="col-12" id="image-div">
<div className="over-image">
<p class="try-calculator">
Calculate the possible return of investments
</p>
</div>
</div>
<div className="col-12" id="calculator-div">
<h1>Return of Investments</h1>
<BenefitCalculator />
<strong>*The average conversion percent is 4, but enter yours in case you know it</strong>
</div>
</div>
EDIT: Forgot to mention I am also using REACTJS
Try backgound-size: cover, contain;
If this does not work send an example of you code. Also height in percentage is always a bad idea. If this is for the element to be as tall as the page use 100vh or some other method. Also note that you will probably need a media query for portrait and landscape orientation.
Try this snippit:
body,
html {
height: 100%;
margin: 0;
padding: 0;
}
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.row-fw {
width: 100vw;
height: 100vh;
}
.col-12 {
flex: 0 0 100%;
max-width: 100%;
}
#image-div {
background-image: url("https://placekitten.com/g/1920/1080");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
display: block;
width: 100%;
color: white;
background-color: rgba(0, 0, 0, 0.5);
background-blend-mode: darken !important;
font-size: 20px;
}
<html>
<body>
<div class="row row-fw">
<div id="image-div"></div>
</div>
</body>
</html>
You could also be using height: 100vh; & width: 100vw; (vw = viewport width, vh = viewport height).
If the parent gets bigger than the size of your screen, so will the background. 100vw & 100vh will only use the viewport width & height.
just add below class to the parent div of image, it will scale itself as per screen sizes.
.img-responsive -> Makes an image responsive (will scale nicely to the parent element).
I have a div with a background image. I want the image to always have at least a 1% left and bottom margin/padding. The container of the div is a dynamic absolutely positioned box which can have a size of 5% or 95% (and everything in between with CSS transition).
I chose to achieve this by putting the background-image on that div which has min-height of 5% and width of 100%. The background is not repeating, centred and set to be contained within the area (background-size: contain). I decided to go with a 1% padding and background-clip CSS property to content-box, which should mean that the background covers only the content which starts at 1% away from the border. I chose padding and not margin, because box-sizing is set to border-box, therefore a width 100% with additional padding would not increase the size of the div which is not the case with margin.
However this did not work as expected:
When using background-clip: content-box together with background-size: contain, the background is contained within the border-box and not content-box and the padding cuts away the areas between the content and border.
Example:
div {
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
background-image: url(http://www.ghacks.net/wp-content/uploads/2011/04/standard-google-image-search.jpg);
float: left;
width: 200px;
height: 200px;
}
.clipped {
border: 1px solid blue;
padding: 20px;
background-clip: content-box;
}
.normal {
border: 1px solid green;
padding: 20px;
background-size: contain;
}
<div class="clipped">
</div>
<div class="normal">
</div>
So the questions are:
Is this the normal behaviour?
Where is this documented?
What would be the solution to achieve what I need?
p.s. I am not English so apologies for possible mistakes or misconceptions. Also I will try to explain better in case you did not understand the issue.
Yes, this is normal behavior. The content-box does not mean the image is sized within it, it means it gets clipped by it.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
In below sample I used a pseudo class to achieve it
div {
position: relative;
float: left;
width: 200px;
height: 200px;
border: 1px solid blue;
}
div::before {
content: '';
position: absolute;
left: 20px;
top: 20px;
right: 20px;
bottom: 20px;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
background-image: url(http://www.ghacks.net/wp-content/uploads/2011/04/standard-google-image-search.jpg);
}
<div>
</div>
Is there a way that I can make the width of my navigation bar the same width as the image. The problem is I'm working with an image that has an original size of 497 x 298px but to make the image stretch the full width of the page whilst still having margins of 10px on either side I had to set width: 98.4%.
Also, for some reason when I set the ul to width 100% the navigation is way too long and only fits within a normal desktop screen if I make it 50%. So at the moment they are both the same length, but when I resize the page they start to go out of sync with only the ul element following the rules I've set.
ul {
display: block;
max-width: 100%;
list-style-type: none;
margin: 10px 10px 0 10px;
padding-left: 32%;
padding-right: 25%;
text-align: center;
overflow: hidden;
background-color: #F25f70;
font-family: "Oswald", sans-serif;
border-bottom: 2px solid rgba(0, 0, 0, 0.15)
}
img {
width: 98.4%;
height: 500px;
margin-left: 10px;
margin-right: 10px;
object-fit: cover;
}
You should just wrap your navigation in a <div>. Give it 100% width. Then assign a background-image to your <ul> and make that 98% width. including these background properties
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
I created a DEMO HERE
woohooo moving to Cali in a week!!! So I made it Cali themed.
Note: The Image I used is the same dimensions specified in your post.
Also you may wana check out the background-size properties at w3schools
I am making a test webpage to learn html/css. I would like to make the image mold to the shape of the border. It should not be much of a problem but it seems as though the image in not centered in the border. As I change the image size etc it seems as though the image is more so in the middle of the page and leaves the border etc. I just want it to fit perfectly in the border, and for the photo to be clipped along the borders edges. I am having problems with this.
How can I make it so that the image is directly centers and fills the entire border without the middle of the photo or the majority of the photo being left outside of the border?
#pic {
float:right;
transform: rotate(90deg);
}
#bod {
height:300px;
width:300px;
border: 5px ridge blue;
float:right;
border-radius: 105px 105px 0px 0px;
overflow:hidden;
background-image: url("smile.jpg");
background-size: 800px 800px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
<div id="bod">
<div id="pic">
<img src="http://lorempixel.com/800/500" />
</div>
</div>
Change the CSS for your #bod selector to the following:
#bod {
border-radius: 105px 105px 0px 0px;
border: 5px ridge blue;
height: 300px;
width: 300px;
float: right;
overflow: hidden;
background-image: url("smile.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
Just to be clear, I've removed the background-attachment attribute from the style definition and changed the value of the background-size attribute to cover, which is the important part.
Update
You've previously set the image through your CSS by setting the background-image to url("smile.jpg") in the #bod styling. I'm guessing that line isn't needed anymore since you're now setting the image in your HTML with: <img src="http://lorempixel.com/800/500" /> instead.
That image is now off-center, to fix that change your #pic styling to the following:
#pic {
float: right;
transform: rotate(90deg);
transform-origin: 50% 50%;
height: 100%;
width: 100%;
}
I've added the transform-origin, width and height attributes to the #pic styling.
The center of rotation is middle of div, so you have to make sure that the center is in the right place. You should just do this:
#pic {
width:100%;
height: 100%;
transform: rotate(90deg);
}
#pic img{
width: 100%;
height: 100%;
}
https://jsfiddle.net/ebc5yjzu/3/
Demo
.moving_background
{
background-image: url("../image/quote3.jpg");
background-position: 50% center; /*Centering property*/
background-repeat: no-repeat;
height: 100px;
margin: 20px;
width: 100px;
border:1px solid;
}
If i change the width and height to 100%, it is not showing the border to me. I don't understand the reason. Please let me know this
I am trying to center this div in the body. Any other ways are also welcome except negative top, left, margin values.
Any idea?
The issue is that background-image does not count as content in your div, so what you have is an empty div, hence it has no height. A way around this is to add the image inside the div, then hide it.
HTML
<div class="moving_background">
<image src="http://placehold.it/100x100" class="background"/>
</div>
CSS
.moving_background {
background-image: url("http://placehold.it/100x100");
background-position: 50% center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
margin: 20px;
width: 100%;
border:1px solid;
}
.background {
visibility: hidden
}
JSFiddle: http://jsfiddle.net/nhg33xek/4/